jQuery使用prop属性全选与取消全选

深藏阁楼爱情的钟 2022-04-04 03:42 198阅读 0赞

> jQuery使用prop属性全选与取消全选

在使用jQuery开发全选或取消全选时，用 `attr("checked")` 获取 checkbox 的 `checked`属性时, 如果是选中状态可以取到值, 但是在未选中的时候获取值就是`undefined`。

jQuery1.6中新加了一个方法`prop()`, 用来获取在匹配的元素集中的第一个元素的属性值。

现在使用`prop`方法获取属性, 则统一返回`true`和`false`， 方便程序进行判断。

### 全选与取消全选 ###

使用`prop`属性全选与取消全选:

// 全选
    $("#checkAll").click(function() {  
        console.time('---> 点击全选')
        $("input[name='checkName[]']").prop("checked", true); 
    }); 
    // 取消全选
    $("#cancelAll").click(function() {  
        console.time('---> 取消全选')
        $("input[name='checkName[]']").prop("checked", false);  
    });

### 完整代码如下: ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>jQuery全选与取消全选</title> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    
    <p>
    <input type="button" id="checkAll" name="checkAll" value="全选" /> 
    <input type="button" id="cancelAll" name="cancelAll" value="取消全选" />
    </p>
    <hr/>
    <input type='checkbox' id='id1' name='checkName[]' value='1'/> 选项1 <br/>
    <input type='checkbox' id='id2' name='checkName[]' value='2'/> 选项2 <br/>
    <input type='checkbox' id='id3' name='checkName[]' value='3'/> 选项3 <br/>
    <input type='checkbox' id='id4' name='checkName[]' value='4'/> 选项4 <br/>
    <input type='checkbox' id='id5' name='checkName[]' value='5'/> 选项5 <br/>
    <hr/>
    <input type='checkbox' id='onCheckItem'/> 选中 <br/>
    
    <script type="text/javascript">
    $(function() {
           
        // 全选
        $("#checkAll").click(function() {
           
            console.time('---> 点击全选')
            $("input[name='checkName[]']").prop("checked", true); 
        }); 
        // 取消全选
        $("#cancelAll").click(function() {
           
            console.time('---> 取消全选')
            $("input[name='checkName[]']").prop("checked", false);  
        }); 
    
        // 选中与取消选中
        $("#onCheckItem").click(function() {
           
            var isChecked = $(this).prop('checked');
            console.log('---> 是否选中:' + isChecked)
            $('input:checkbox').prop("checked", isChecked);
        }); 
    });
    </script>
    </body>
    </html>

### 参考链接 ###

[http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html][http_www.cnblogs.com_Showshare_p_different-between-attr-and-prop.html]  
[http://www.cnblogs.com/seanshao/p/5727471.html][http_www.cnblogs.com_seanshao_p_5727471.html]

\[END\]

[http_www.cnblogs.com_Showshare_p_different-between-attr-and-prop.html]: http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
[http_www.cnblogs.com_seanshao_p_5727471.html]: http://www.cnblogs.com/seanshao/p/5727471.html