87,907
社区成员
发帖
与我相关
我的任务
分享js中怎样把一个js对象作为jquery的选择器中的一串字符？
如图，我做了一个这样的表格，表格里有对应的复选框。
这是我对于复选框的处理。对于不同类型的复选框，在name里面加了编号。
这是我处理全选框的js代码。之前忘了给每列的checkbox加独特的编号，导致点击一个全选矿就会选中所有的checkbox。现在的做法可以确保点击全选只选中当前列的复选框。
但是这样的方法依旧很繁琐，可以看到我对于每一列的checkbox的name属性都写了相应的选择器，现在我的想法是，选中一个全选checkbox，获取它的id，然后选中id相同的checkbox全部打勾。但是貌似jquery的选择器里不能加入js定义的对象（或者是我不知道怎么做）？
还请大神指导一下！谢谢！
<tr>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox8">增加</input></li>
<li><input type="checkbox" name="subCheckBox8">不变</input></li>
<li><input type="checkbox" name="subCheckBox8">减少</input></li>
<li><input type="checkbox" name="AllSelect8">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox9">增加</input></li>
<li><input type="checkbox" name="subCheckBox9">不变</input></li>
<li><input type="checkbox" name="subCheckBox9">减少</input></li>
<li><input type="checkbox" name="AllSelect9">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox10">增加</input></li>
<li><input type="checkbox" name="subCheckBox10">不变</input></li>
<li><input type="checkbox" name="subCheckBox10">减少</input></li>
<li><input type="checkbox" name="AllSelect10">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox11">增加</input></li>
<li><input type="checkbox" name="subCheckBox11">不变</input></li>
<li><input type="checkbox" name="subCheckBox11">减少</input></li>
<li><input type="checkbox" name="AllSelect11">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox12">增加</input></li>
<li><input type="checkbox" name="subCheckBox12">不变</input></li>
<li><input type="checkbox" name="subCheckBox12">减少</input></li>
<li><input type="checkbox" name="AllSelect12">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox13">增加</input></li>
<li><input type="checkbox" name="subCheckBox13">不变</input></li>
<li><input type="checkbox" name="subCheckBox13">减少</input></li>
<li><input type="checkbox" name="AllSelect13">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox14">增加</input></li>
<li><input type="checkbox" name="subCheckBox14">不变</input></li>
<li><input type="checkbox" name="subCheckBox14">减少</input></li>
<li><input type="checkbox" name="AllSelect14">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox15">增加</input></li>
<li><input type="checkbox" name="subCheckBox15">不变</input></li>
<li><input type="checkbox" name="subCheckBox15">减少</input></li>
<li><input type="checkbox" name="AllSelect15">全部</input></li>
</ul>
</td>
<td >
<ul>
<li><input type="checkbox" name="subCheckBox16">增加</input></li>
<li><input type="checkbox" name="subCheckBox16">不变</input></li>
<li><input type="checkbox" name="subCheckBox16">减少</input></li>
<li><input type="checkbox" name="AllSelect16">全部</input></li>
</ul>
</td>
</tr>这是我对于复选框的处理。对于不同类型的复选框，在name里面加了编号。
$('input[name="AllSelect16"]').click(function(){
if($(this).is(':checked')){
$('input[name="subCheckBox16"]').each(function(){
//此处如果用attr，会出现第三次失效的情况
$(this).prop("checked",true);
});
}else{
$('input[name="subCheckBox16"]').each(function(){
$(this).removeAttr("checked",false);
});
}
});
$('input[name="AllSelect17"]').click(function(){
//alert(this.checked);
if($(this).is(':checked')){
$('input[name="subCheckBox17"]').each(function(){
//此处如果用attr，会出现第三次失效的情况
$(this).prop("checked",true);
});
}else{
$('input[name="subCheckBox17"]').each(function(){
$(this).removeAttr("checked",false);
});
}
});这是我处理全选框的js代码。之前忘了给每列的checkbox加独特的编号，导致点击一个全选矿就会选中所有的checkbox。现在的做法可以确保点击全选只选中当前列的复选框。
但是这样的方法依旧很繁琐，可以看到我对于每一列的checkbox的name属性都写了相应的选择器，现在我的想法是，选中一个全选checkbox，获取它的id，然后选中id相同的checkbox全部打勾。但是貌似jquery的选择器里不能加入js定义的对象（或者是我不知道怎么做）？
还请大神指导一下！谢谢！
...全文
请发表友善的回复…
发表回复
roffer 2018-02-02
- 打赏
- 举报
哦哦，错了，
应该是#3楼的代码。
roffer 2018-02-02
- 打赏
- 举报
$('input[name^=AllSelect]').click(function() {
$(this).parent().siblings().prop('checked', this.checked);
});
SheldorWsy 2018-02-02
- 打赏
- 举报
谢谢，最终用了这个，还很方便修改！
Hello World, 2018-02-01
- 打赏
- 举报
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
<td>
<ul>
<li>
<label>
<input type="checkbox" />增加</label></li>
<li>
<label>
<input type="checkbox" />减少</label></li>
<li>
<label>
<input type="checkbox" />不变</label></li>
<li>
<label>
<input type="checkbox" class="chkAll" />全部</label></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<script src="../../Script/jquery-1.11.3.min.js"></script>
<script>
$(function () {
$('input:checkbox').click(function () {
if ($(this).hasClass('chkAll')) {
$(this).parentsUntil('td').find('input:checkbox').prop('checked', this.checked);
} else {
if (this.checked == false) {
$(this).parentsUntil('td').find('input:checkbox.chkAll').prop('checked', false);
}
}
});
});
</script>
usecf 2018-02-01
- 打赏
- 举报
name 属性可以用一个名字 然后循环遍历 看那个checkbox的属性=checked 去判断
wcwtitxu 2018-02-01
- 打赏
- 举报
$('input[name^=AllSelect]').click(function() {
$(this).closest('ul').find('input[name^=subCheckBox]').prop('checked', this.checked);
});
