Chapter 3 business function development (realize the real-time response of the select all button)

customer demand ：

When you click the select all box , Check all boxes , And check the check boxes of all data .

When you click the select all box again , Check all boxes to cancel , And the check boxes of all data are also checked and cancelled .

After clicking the select all box , When you click the check box of the data item, uncheck the current data item , The check all box should also be unchecked

Function development ：

stay index.jsp Page js Write in

// Set the select all function for the select all button 
        $("#checkAll").click(function () {
            $("#tBody input[type='checkbox']").prop("checked",this.checked);
        });
        // Add a click event to the data item's multiple selection box 
        $("#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);
			}
        });

The data of this page comes from jquery The joining together of , These data are all spliced into tBody In the label box of

success:function (data) {
               // Show campaign list 
               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);

A functional test ：

Click the select all button

Click the select all button again

After clicking the select all button , Click a data item to uncheck it , The select all button will also be deselected in real time