自定义-多选框使用
程序员文章站
2022-07-13 23:09:45
...
// 单独使用-非公用
$("body").on("click", "#checkAll", function () {
var isCheck=$("#checkAll").is(':checked'); //获得全选复选框是否选中
$("input[type='checkbox']").each(function() {
this.checked = isCheck; //循环赋值给每个复选框是否选中
});
});
$("body").on("click", ".singleCheck", function () {
$("#checkAll").prop('checked',
$(":checkbox[name='oneCheck']").length == $(":checkbox[name='oneCheck']:checked").length);
});
// 每一行数据自定义的多选框,此处的name与下面的公用多选框name的check-id一致
var showAction = function (id, name) {
var action;
action = '<label style="height:15px;text-align: center" >' +
'<input name="' + name + '" type="checkbox" class="singleCheck" value="' + id + '"> ' +
'</label>';
return action;
}
// 改进-可公用
$("body").on("click", ".checkAll", function () {
// check-id为随意定义的属性,属性值与预先定义好的多选框的name相同即可
var name = $(this).attr("check-id");
//获得全选复选框是否选中
var isCheck = $(":checkbox[check-id='" + name + "']").is(':checked');
$("input[name='" + name + "']").each(function () {
this.checked = isCheck; //循环赋值给每个复选框是否选中
});
});
$("body").on("click", ".singleCheck", function () {
var name = $(this).attr("name");
$(".checkAll").prop('checked',
$(":checkbox[name='" + name + "']").length == $(":checkbox[name='" + name + "']:checked").length);
});