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