问题记录01——动态拼接多选框的全选与反选

问题记录01——动态拼接多选框的全选与反选

**问题描述：**在进行删除或下载操作时经常需要使用到全选与反选操作提高用户体验感，今天笔者开发时遇到一个小问题，在为动态拼接的组件绑定全选反选的事件时，全选正常实现了，但却不能实现反选，在确定代码没有问题后，笔者查阅了相关文章弄清楚了原因。。。

1.问题代码

（1）以下是发送ajax动态拼接组件，其中html中的checkbox是需要点击全选时全部勾选上的选框

$.ajax({
    url:"路径",
     data:{
      "数据1":数据1,
      "数据2":数据2
     },
     type:"post",
     dataType:"json",
     success:function (res) {
      <!--
       res返回map
       1.success：true/fales
       2.students:student数组对象
       -->
      var html = ''
      if (res.success){
	 $.each(res.students,function (i,obj) {
        html+='<tr class="active">'
        html+='<td><input type="checkbox" class="xz" value="'+obj.id+'"/></td>'
        html+=html+='<td>'+obj.name+'</td>'
        html+='<td>'+obj.owner+'</td>'
        html+='<td>'+obj.startDate+'</td>'
        html+='<td>'+obj.endDate+'</td>'
        html+='</tr>'
       })
       
       $("#showActivity").html(html)
      }
     }
   })

（2）以下是全选框与单选框所在的表格：

<table class="table table-hover">
   <thead>
      <tr>
         <td><input type="checkbox" id="all" /></td>
         <td>名称</td>
         <td>所有者</td>
         <td>开始日期</td>
         <td>结束日期</td>
      </tr>
   </thead>
   <tbody id="showActivity">
    </tbody>
</table>

（3）以下是执行全选与反选的js代码：

$("#all").click(function () {
	$(".xz").prop("checked",$("#all").prop("checked"))
})
$(".xz").click(function () {
	$("#all").prop("checked",$(".xz").length==$(".xz:checked").length)
})

结果：

全选正常实现了，但反选却无法完成，这是为什么呢？

问题原因：

原来在JQuery的代码中不能直接为动态组件绑定事件，这些动态组件需要通过其有效的上级组件，通过on方法绑定事件。
有效的上级组件是指非动态拼接的父组件，如本例中需要点击全选时全部勾选上的选框的class是.xz，它的直接父组件是td,但由于td也是动态拼接的组件，所以为无效上级组件，本例中的有效上级组件为tbody 。

问题解决：

用jquery的on方法为其绑定点击事件：

$("#all").click(function () {
          $(".xz").prop("checked",$("#all").prop("checked"))
      })
$("#showActivity").on("click",'.xz',function () {
   $("#all").prop("checked",$(".xz").length==$(".xz:checked").length)
})

on的使用方法为：$obj.on（’事件‘，‘需要绑定事件的组件’，回调函数）值
选中需要绑定事件的组件是的语法与jquery选中组件的方法相同
但需要里面引号的部分。

结果：

反选正常实现了！