jQuery 获取 checkbox 内容

 

    <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;
            }
        }
    }