怎么实现复选框同列全选。选不选。同列有一个不选的。表头就不选

丶空缺 2017-10-13 01:14:32
<table class="table table-bordered" id="table">
<thead id="thead">
<tr>
<th>
渠道
</th>
<th>
<label class="checkbox state-error"><input value="1" mark2="3" mark="0" type="checkbox" name="Platform" checked="checked"><i></i>Android</label>
</th>
<th>
<label class="checkbox state-error"><input value="2" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</th>
<th>
<label class="checkbox state-error"><input value="3" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</th>

</tr>
</thead>
<tbody id="tbody">
<tr>
<th>515德州扑克-QQ空间</th>
<td>
<label class="checkbox state-error"><input value="1" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</td>
<td>
<label class="checkbox state-error"><input value="2" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</td>
<td>
<label class="checkbox state-error"><input value="3" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</td>

</tr>
<tr>
<th>515德州扑克-IOS</th>
<td>
<label class="checkbox state-error"><input value="1" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</td>
<td>
<label class="checkbox state-error"><input value="2" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</td>
<td>
<label class="checkbox state-error"><input value="3" mark2="3" mark="0" type="checkbox" name="Platform"><i></i>Android</label>
</td>

</tr>
<tr>
<td colspan="13"><button type="button" class="btn btn-danger pull-right">确定</button></td>
</tr>
</tbody>
</table>
...全文
205 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
clark_kidd 2017-10-13
  • 打赏
  • 举报
回复
$(function(){
    $("#table thead").on("click", ":checkbox", function(event){
        var i = $(this).closest("th").index()+1;
        var v = $(this).prop("checked");
        $("#table tbody td:nth-child("+i+") :checkbox").prop("checked",v);
    });
    $("#table tbody").on("click", ":checkbox", function(event){
        var i = $(this).closest("td").index()+1;
        var v = $("#table tbody td:nth-child("+i+") :checkbox:not(:checked)").length==0;
	var indeterminate = !v && $("#table tbody td:nth-child("+i+") :checkbox").length>$("#table tbody td:nth-child("+i+") :checkbox:not(:checked)").length;
        $("#table thead th:nth-child("+i+") :checkbox").prop("checked",v).prop("indeterminate",indeterminate);
    });
});
楼上对,优化了一个中间态
天际的海浪 2017-10-13
  • 打赏
  • 举报
回复

$(function(){
	$("#table thead").on("click", ":checkbox", function(event){
		var i = $(this).closest("th").index()+1;
		var v = $(this).prop("checked");
		$("#table tbody td:nth-child("+i+") :checkbox").prop("checked",v);
	});
	$("#table tbody").on("click", ":checkbox", function(event){
		var i = $(this).closest("td").index()+1;
		var v = $("#table tbody td:nth-child("+i+") :checkbox:not(:checked)").length==0;
		$("#table thead th:nth-child("+i+") :checkbox").prop("checked",v);
	});
});

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧