客户需求:
当点击全选框时,实现全选框勾选,以及所有数据的复选框也进行勾选。
再次点击全选框时,实现全选框勾选取消,以及所有数据的复选框也进行勾选取消。
点击全选框后,当点击数据项的复选框取消当前数据项的勾选,全选框也应取消勾选
功能开发:
在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);
功能测试:
点击全选按钮
再次点击全选按钮
点击全选按钮后,点击一个数据项取消其勾选,全选按钮也会实时的进行取消勾选