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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值