jsp页面checkbox全选或全部取消的代码

时间:2023-02-07 18:01:47
jsp页面checkbox全选或全部取消的代码:
$(function(){
/*
给所有条目的复选框添加click事件
*/
$("input[name='checkboxBtn']").click(function() {
var selectAll=document.getElementById('selectAll');


var all = $("input[name='checkboxBtn']").length;//所有条目的个数
var select = $("input[name='checkboxBtn']:checked").length;//获取所有被选择条目的个数
if(all == select) {//全都选中了
selectAll.checked=true;//勾选全选复选框,这里不支持$("#selectAll").attr("checked", true);
} else if(select == 0) {//谁都没有选中
selectAll.checked=false;//取消全选,这里不支持$("#selectAll").attr("checked", false);
} else {
selectAll.checked=false;//取消全选,这里不支持$("#selectAll").attr("checked", false);
}
});

$("#selectAll").click(function() {
var selectAll=document.getElementById('selectAll');
var checkboxs=document.getElementsByName('checkboxBtn');
  for(var i=0;i<checkboxs.length;i++)
  {
      checkboxs[i].checked=selectAll.checked;
  }
});

});
<body>
<input type="checkbox" name="checkboxBtn" value="1"/>
<input type="checkbox" name="checkboxBtn" value="2"/>
<input type="checkbox" name="checkboxBtn" value="3"/>
<input type="checkbox" id="selectAll" class="selectAll" title="全选" /> 全选
</body>