java复选框反选_java基础---Jquery复选框checkbox全选反选及选中事件

Jquery复选框

HTML代码：

• 吃饭
• 睡觉
• 打豆豆

因为是用jquery做的，所以必须先要导入jquery的js文件

jquery代码

1.点击全选，再点击全不选

$("#checkboxAll").click(function(){

if(this.checked){

$("#choose :checkbox").prop("checked", true);

}else{

$("#choose :checkbox").prop("checked", false);

}

});

2.点击全选

$("#selectAll").click(function () {

$("#choose:checkbox,#checkoxAll").prop("checked", true);

});

3.点击全不选

$("#unSelect").click(function () {

$("#choose:checkbox,#checkboxAll").prop("checked", false);

});4.反选

$("#reverse").click(function () {

$("#choose:checkbox").each(function () {

$(this).prop("checked", !$(this).prop("checked"));

});

allchk();

});

函数allchk()就是用来检测全选框#checkAll应该是选中状态还是未选中状态的

function allchk(){

var chknum = $("#choose:checkbox").size();//选项总个数

var chk = 0;

$("#choose:checkbox").each(function () {

if($(this).prop("checked")==true){

chk++;

}

});

if(chknum==chk){//全选

$("#checkboxAll").prop("checked",true);

}else{//不全选

$("#checkboxAll").prop("checked",false);

}

}5.获得所有选中值

$("#getValue").click(function(){

var valArr = "";

$("#choose :checkbox").each(function () {

if($(this).prop("checked")==true){

valArr+= $(this).val()+",";//转换为逗号隔开的字符串

}

});

alert(valArr);

});6.当checkbox全部选中时，全选按钮自动选中

$("#choose:checkbox").click(function(){

allchk();

});