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

  
 吃饭
  
 睡觉
  
 打豆豆

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

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,赋值

 for(var i=0;i

7，获取被选中的值

   var list=new Array();

        $.each($('input:checkbox:checked'),function(){

           list.push($(this).val());

        });







查看





添加





修改





删除