Jquery 复选框全选与反选点击执行一次然后失效解决方案
代码需求, 使用attr只能执行一次,使用prop则完美实现全选和反选,获取所有选中的项并把选中项的文本组成一个字符串。
解决方案一:
代码如下:
<html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list[]" value="1" />1 <input type="checkbox" name="chk_list[]" value="2" />2 <input type="checkbox" name="chk_list[]" value="3" />3 <input type="checkbox" name="chk_list[]" value="4" />4 <input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选 <script type="text/javascript"> $("#chk_all").click(function(){ // 使用attr只能执行一次 $("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); // 使用prop则完美实现全选和反选 $("input[name='chk_list[]']").prop("checked", $(this).prop("checked")); // 获取所有选中的项并把选中项的文本组成一个字符串 var str = ''; $($("input[name='chk_list[]']:checked")).each(function(){ str += $(this).next().text() + ','; }); alert(str); }); </script> </body> </html>
总结:
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
参考 http://www.jb51.net/article/62308.htm
<script type="text/javascript">
jQuery(function($) {
// 给全选添加点击事件
$("[name='allSel']").click(function(){
if($(this).is(':checked')){
$("[name='select']").prop('checked',true);
}else{
$("[name='select']").prop('checked',false);
}
});
//给复选框添加点击事件
$("[name='select']").click(function(){
var allSel = false;
$("[name='select']").each(function(){
if(!$(this).is(':checked')){
allSel = true;
}
})
//如果有checkbox没有被选中
if(allSel){
$("[name='allSel']").prop('checked',false);
}else{
$("[name='allSel']").prop('checked',true);
}
})
});
</script>