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/seanshao/p/5727471.html

[END]