ホームページ >ウェブフロントエンド >jsチュートリアル >jsですべてのチェックボックスを選択して反転する方法

jsですべてのチェックボックスを選択して反転する方法

一个新手
一个新手オリジナル
2017-09-30 09:04:382412ブラウズ

この記事は、2 つの形式を持つチェック ボックスについて説明しています: 1. すべて選択と選択を反転は 2 つのボタンで実装されます。2. すべて選択と選択を反転は 1 つのボタンで実装されます。


<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>复选框demo</title>
        <script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
        <style>
            body{ text-align:center} 
            .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;} 
        </style> 
    </head>
    <body>
        <p class="con">
            <span><input type=&#39;checkbox&#39; name=&#39;select&#39; onclick=&#39;allSelect()&#39;>全选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;cancel&#39; onclick=&#39;unAllSelect()&#39;>反选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />苹果</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />香蕉</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />梨子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />桃子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />西瓜</span>
            
            <br><br><br>
            
            <span><input type=&#39;checkbox&#39; id="allBook"  name=&#39;allBook&#39; />全选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />老子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />尚书</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />周易</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />诗经</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />孟子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />中庸</span>
            <script type="text/javascript">
    //全选
    function allSelect(){
        $("input[name=&#39;fruit&#39;]").prop("checked", "checked");
        $("input[name=&#39;cancel&#39;]").removeAttr("checked");
    }    //反选
    function unAllSelect(){
        $("input[name=&#39;fruit&#39;]").removeAttr("checked");
        $("input[name=&#39;select&#39;]").removeAttr("checked");
    }    
    //单选    
            $("#allBook").click(function(){        
            if(this.checked){//            
            $("input[name=&#39;book&#39;]").attr("checked", true);            
            $("input[name=&#39;book&#39;]").prop("checked", "checked");
          }else{//          
          $("input[name=&#39;book&#39;]").attr("checked", false);            
          $("input[name=&#39;book&#39;]").removeAttr("checked");
          }
    });</script>
        </p>
    </body>
    </html>

実際に問題が発生しました - チェックをすべて選択できませんでした。解決策は、attr の代わりに prop メソッドを使用することです。


$("input[name=&#39;book&#39;]").attr("checked", "checked");
$("input[name=&#39;book&#39;]").prop("checked", "checked");

これは、jQuery のバージョンに関連している可能性があります。

以上がjsですべてのチェックボックスを選択して反転する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。