checkbox全选,反选,获取全选值,获取checkbox勾选长度

朴灿烈づ我的快乐病毒、 2022-04-23 12:58 291阅读 0赞

**这个checkbox全选反选这些场景还是挺常见的，So,在此记录一下，方便大家方便自己。**

**废话不多说，直接看代码。。**

**1.全选和反选,参数为name和id**

//js全选和反选代码
    //name为checkbox的name
    function selectCheckboxAll(name,id){
            if ($("#"+id).prop("checked")) {
                $("input[type='checkbox'][name='"+name+"']").prop("checked",true);//全选
    
            } else {
                $("input[type='checkbox'][name='"+name+"']").prop("checked",false);  //取消全选
            }
        }

//全选或反选勾选事件(也可做一个按钮)
    <input type="checkbox" id="checPersonkall"  onclick="selectCheckboxAll('checkePerson','checPersonkall')"></input>
    
    checkbox信息
    <input type="checkbox" name="checkePerson" value="1"></input>
    <input type="checkbox" name="checkePerson" value="2"></input>
    <input type="checkbox" name="checkePerson" value="3"></input>
    <input type="checkbox" name="checkePerson" value="4"></input>
    <input type="checkbox" name="checkePerson" value="5"></input>
    <input type="checkbox" name="checkePerson" value="6"></input>

**2.获取checkbox勾选项的值**

var type = "";  
    $("input[name=checkePerson]:checked").each(function () {
                    type += $(this).attr('value') + ',';
        });
       type = type.substr(0, type.length - 1);//去除最后一个,号

**3.获取checkbox勾选长度**

var checkBoxlength =  $("input[name='checkePerson']:checked").length;
            if(checkBoxlength == '0'){
                alert("请至少选择一项进行申请审核");
                return;
            }

**4.获取checkbox选中行数据(table)**