jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一
目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态.
html:
<input type="checkbox" onclick="contracts_checkall()" id="contracts_checkall"> 全选
js:
1 var checkall = $("#contracts_checkall").attr('checked'); 2 var checkall_value1 = $("#contracts_checkall").val(); 3 var checkall_value2 = $('#contracts_checkall').is(':checked'); 4 console.log(checkall); 5 console.log(checkall_value1); 6 console.log(checkall_value2);
第一次点击:
1 undefined 2 undefined 3 on 4 true
第二次点击:
1 undefined 2 undefined 3 on 4 false
总结, 用is()方法可以判断当前复选框的状态, 即使没有相关属性
全选/取消全选
1 function contracts_checkall() 2 { 3 var checkall = $('#contracts_checkall').is(':checked'); 6 $("input[name='contract[]']").each( 7 function () { 8 this.checked=checkall; 9 // $(this).attr('checked', checkall); //第一次选中和取消是成功的, 再次选中就不起作用了 10 } 11 ); 12 }