How to select and invert all checkboxes in js-JS Tutorial-php.cn

How to select and invert all checkboxes in js

一个新手

Release： 2017-09-30 09:04:38

Original

2365 people have browsed it

This article is about check boxes, which have two forms: 1. Select all and inverse selection are implemented by 2 buttons; 2. Select all and inverse selection are implemented by one button.

<!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>

Copy after login

I encountered a problem in practice - check fails to select all. The solution is to use prop method instead of attr.

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

Copy after login

This may be related to the jQuery version.

The above is the detailed content of How to select and invert all checkboxes in js. For more information, please follow other related articles on the PHP Chinese website!