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

这个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)

function  checkPersonStatus() {
        //获取table的行数
        var rows = document.getElementById("allPersonThisTable").rows;
        //获取所有checkePerson为checkbox的个数
        var a = document.getElementsByName("checkePerson");
        //循环所有的checkbox个数
        for(var i=0;i<a.length;i++)
        {
            //如果该项是checked
            if(a[i].checked){
                //获取行号
                var row = a[i].parentElement.parentElement.rowIndex;
                    //rows[row].cells[3].innerHTML :获取第row行中第cells[3]列数据
                    //判断勾选的数据是否是符合数据
                    if (rows[row].cells[3].innerHTML === 'success_state'){
                       alert('请移除掉已审核完成或已驳回数据再进行申请审核');
                       return;
                    }
                    if (rows[row].cells[3].innerHTML === 'success_state'){
                        alert('请移除掉已审核完成或已驳回完成的数据再进行申请审核');
                        return;
                    }
                }
           }
    }

猜你喜欢

转载自blog.csdn.net/Xiaodongge521/article/details/87918143
今日推荐