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

Jquery复选框

HTML代码：

<ul id="choose">     <li><label><input type="checkbox" value="1"> 吃饭</label></li>   <li><label><input type="checkbox" value="2"> 睡觉</label></li>   <li><label><input type="checkbox" value="3"> 打豆豆</label></li></ul><input type="checkbox" id="checkboxAll"><input type="button" value="全选" class="btn" id="selectAll">  <input type="button" value="全不选" class="btn" id="unSelect">  <input type="button" value="反选" class="btn" id="reverse">  <input type="button" value="获得选中的所有值" class="btn" id="getValue">

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

<script src="${ctx!}/assets/js/jquery/jquery-2.0.3.min.js"></script>

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();});