第3章业务功能开发（实现全选按钮实时的响应）

客户需求：

当点击全选框时，实现全选框勾选，以及所有数据的复选框也进行勾选。

再次点击全选框时，实现全选框勾选取消，以及所有数据的复选框也进行勾选取消。

点击全选框后，当点击数据项的复选框取消当前数据项的勾选，全选框也应取消勾选

功能开发：

在index.jsp页面的js中进行编写

//给全选按钮设置全选功能
        $("#checkAll").click(function () {
            $("#tBody input[type='checkbox']").prop("checked",this.checked);
        });
        //给数据项的多选框添加单击事件
        $("#tBody").on("click","input[type='checkbox']",function () {
            if ($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
            	$("#checkAll").prop("checked",true);
			} else {
            	$("#checkAll").prop("checked",false);
			}
        });

该页面的数据来自jquery的拼接，这些数据全部拼接到tBody的标签框里

success:function (data) {
               //显示市场活动列表
               var htmlStr="";
               $.each(data.clues,function (index,obj) {
                   htmlStr+="<tr class=\"active\">";
                   htmlStr+="<td><input type=\"checkbox\" /></td>";
                   htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.fullname+"</a></td>";
                   htmlStr+="<td>"+obj.company+"</td>";
                   htmlStr+="<td>"+obj.phone+"</td>";
                   htmlStr+="<td>"+obj.mphone+"</td>";
                   htmlStr+="<td>"+obj.source+"</td>";
                   htmlStr+="<td>"+obj.owner+"</td>";
                   htmlStr+="<td>"+obj.state+"</td>";
                   htmlStr+="</tr>";
               });
                $("#tBody").html(htmlStr);

功能测试：

点击全选按钮

再次点击全选按钮

点击全选按钮后，点击一个数据项取消其勾选，全选按钮也会实时的进行取消勾选