<section class="col col-6">
<label class="label">-标题</label>
<label class="laytable-cell-checkbox">
<input type="checkbox" name="checkbox" value="1" lay-skin="primary" onclick="chk_changed()" title="1"> 1
<input type="checkbox" name="checkbox" value="2" lay-skin="primary" onclick="chk_changed()" title="2"> 2
<input type="checkbox" name="checkbox" value="3" lay-skin="primary" onclick="chk_changed()" title="3"> 3
<input type="checkbox" name="checkbox" value="4" lay-skin="primary" onclick="chk_changed()" title="4"> 4
</label>
</section>
<input id="dis" name="dis" type="text" style="display: none" />
<button type="button" onclick="selectAll()">全选</button>
<button type="button" onclick="unSelectAll()">全不选</button>
<button type="button" onclick="converSelectAll()">反选</button>
获取勾选的复选框
//获取用户选择的内容
//复选框勾选,更新显示
function chk_changed() {
$("input[name='checkbox']:checked").each(function() {
console.log($(this).val());
});
//--------
$.each($("input[name='checkbox']:checked"), function () {
check = check + $(this).val() + ',';
});
}
获取没有勾选的复选框
//复选框勾选,更新显示
//获取用户未选择的内容
function chk_changed() {
$("input[name='checkbox']:not(:checked)").each(function() {
console.log($(this).val());
});
//-------------------
var check = '';
$.each($("input[name='checkbox']:not(:checked)"), function () {
check = check + $(this).val() + ',';
});
$("#dis").val(check);
}
显示勾选情况
var dis = '1,2,3,4';//获取后端传回的数据
console.info(dis);
var dislist = dis.split(',');
if (dislist.length > 0) {
for (var i = 0; i < dislist.length; i++) {
$("input[name='checkbox'][value='" + dislist[i] + "']").prop('checked', true);
}
}
全选 全不选 和反选
var checkboxs = document.getElementsByName("checkbox");
function selectAll(){
for(var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = true;
}
}
function unSelectAll(){
for(var i = 0;i<checkboxs.length;i++){
checkboxs[i].checked = false;
}
}
function converSelectAll(){
for(var i = 0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
checkboxs[i].checked = false;
}else{
checkboxs[i].checked = true;
}
}
}