Javascript JQuery根据水平方向上tr的类名选中td中的所有复选框
这是我的示例代码。附上一张图片。我需要的格式 $table tbody.onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var isChecked=此项已检查； 如果当前CB.is.groupHeadCheck{ var allCbs=currentCB.closest'tr'.nextUntil'tr.groupHead'.find'[type=checkbox]'.prop'checked'，已选中； }否则{ var allCbs=currentCB.closest'tr'.prevAlltr.groupHead:first.nextUntil'tr.groupHead'.andSelf.find'[type=checkbox]； var allSlaves=allCbs.not.groupHeadCheck； var master=allCbs.filter.groupHeadCheck； var检查； 如果！我检查过了{ allChecked=false； }否则{ allChecked=allSlaves.filter:checked.length==allSlaves.length； } master.propchecked，allChecked； } }; $.groupHead.next.find[type=checkbox].change； .groupHead td{背景色：CCC；} 1. 2. 3.Javascript JQuery根据水平方向上tr的类名选中td中的所有复选框,javascript,jquery,html,Javascript,Jquery,Html,这是我的示例代码。附上一张图片。我需要的格式 $table tbody.onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var isChecked=此项已检查； 如果当前CB.is.groupHeadCheck{ var allCbs=currentCB.closest'tr'.nextUntil'tr.groupHead'.find'[type=checkbox]'.prop'checked'，已选中； }否则{ var allCbs
只需简化几个代码字符串 $table tbody.onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var isChecked=此项已检查； 如果当前CB.is.groupHeadCheck{ var allCbs=currentCB.最近的'tr'。查找'[type=checkbox]'。属性'checked'，已检查； }否则{ var allCbs=currentCB.closest'tr'。查找“[type=checkbox]”； var allSlaves=allCbs.not.groupHeadCheck； var master=allCbs.filter.groupHeadCheck； var检查； 如果！我检查过了{ allChecked=false； }否则{ allChecked=allSlaves.filter:checked.length==allSlaves.length； } master.propchecked，allChecked； } }; $.groupHead.next.find[type=checkbox].change； .groupHead td{背景色：CCC；} 1. 2. 3.
只需简化几个代码字符串 $table tbody.onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var isChecked=此项已检查； 如果当前CB.is.groupHeadCheck{ var allCbs=currentCB.最近的'tr'。查找'[type=checkbox]'。属性'checked'，已检查； }否则{ var allCbs=currentCB.closest'tr'。查找“[type=checkbox]”； var allSlaves=allCbs.not.groupHeadCheck； var master=allCbs.filter.groupHeadCheck； var检查； 如果！我检查过了{ allChecked=false； }否则{ allChecked=allSlaves.filter:checked.length==allSlaves.length； } master.propchecked，allChecked； } }; $.groupHead.next.find[type=checkbox].change； .groupHead td{背景色：CCC；} 1. 2. 3. 检查这个 $table tbody.onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var pt=$this.parentstr； var isChecked=此项已检查； pt.findinput[type=checkbox].propchecked，isChecked； }; $.groupHead.next.find[type=checkbox].change； .groupHead td{背景色：CCC；} 1. 2. 3. 检查这个 $table tbody.onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var pt=$this.parentstr； var isChecked=此项已检查； pt.findinput[type=checkbox].prop 检查，检查； }; $.groupHead.next.find[type=checkbox].change； .groupHead td{背景色：CCC；} 1. 2. 3.
我已经做了你想做的 它还会在页面加载时自动选中复选框。如果选中了所有其他复选框，则会选中第一个复选框
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tbody>
<tr>
<th>
1. <input type="checkbox" class="groupHeadCheck" />
</th>
<td>
<input type="checkbox" id="1" />
</td>
<td>
<input type="checkbox" id="2" />
</td>
<td>
<input type="checkbox" id="3" />
</td>
</tr>
<tr>
<th>
2. <input type="checkbox" class="groupHeadCheck" />
</th>
<td>
<input type="checkbox" id="4" />
</td>
</tr>
<tr>
<th>
3. <input type="checkbox" class="groupHeadCheck" />
</th>
<td>
<input type="checkbox" id="6" checked="checked" />
</td>
<td>
<input type="checkbox" id="7" checked="checked"/>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
currentCB.parents('tr').find('[type="checkbox"]').prop('checked', isChecked);
}
$(document).find('tr').each(function(){
var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;
if((total_chk_in_row - 1) == total_checked_chk){
jQuery(this).find('.groupHeadCheck').prop('checked',true);
}
});
});
$(document).find('tr').each(function(){
var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;
if((total_chk_in_row - 1) == total_checked_chk){
jQuery(this).find('.groupHeadCheck').prop('checked',true);
}
});
$(".groupHead").next().find("[type=checkbox]").change();
</script>
</body>
</html>
我已经做了你想做的 它还会在页面加载时自动选中复选框。如果选中了所有其他复选框，则会选中第一个复选框
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tbody>
<tr>
<th>
1. <input type="checkbox" class="groupHeadCheck" />
</th>
<td>
<input type="checkbox" id="1" />
</td>
<td>
<input type="checkbox" id="2" />
</td>
<td>
<input type="checkbox" id="3" />
</td>
</tr>
<tr>
<th>
2. <input type="checkbox" class="groupHeadCheck" />
</th>
<td>
<input type="checkbox" id="4" />
</td>
</tr>
<tr>
<th>
3. <input type="checkbox" class="groupHeadCheck" />
</th>
<td>
<input type="checkbox" id="6" checked="checked" />
</td>
<td>
<input type="checkbox" id="7" checked="checked"/>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
currentCB.parents('tr').find('[type="checkbox"]').prop('checked', isChecked);
}
$(document).find('tr').each(function(){
var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;
if((total_chk_in_row - 1) == total_checked_chk){
jQuery(this).find('.groupHeadCheck').prop('checked',true);
}
});
});
$(document).find('tr').each(function(){
var total_chk_in_row = jQuery(this).find('[type="checkbox"]').length;
var total_checked_chk = jQuery(this).find('td > [type="checkbox"]:checked').length;
if((total_chk_in_row - 1) == total_checked_chk){
jQuery(this).find('.groupHeadCheck').prop('checked',true);
}
});
$(".groupHead").next().find("[type=checkbox]").change();
</script>
</body>
</html>
您可以尝试以下方法： $table tbody.onchange，输入[type=checkbox]，函数e{ 如果$this.hasClass'groupHeadCheck'&&$this.is'：选中{ $this.closest'tr'。查找'td input'。属性'checked'，'checked'； } 否则如果$this.hasClass'groupHeadCheck'&&$this.not'：选中{ $this.closest'tr'。查找'td input'。删除'checked'； } 如果！$this.hassclass'groupHeadCheck'{ var total=$this.closest'tr'。查找'td input'。长度； var chekced=$this.closest'tr'。查找'td input:checked'。长度； iftotal==chekced{ $this.closest'tr'。查找'th.groupHeadCheck'。属性'checked'，'checked'； } 否则{ $this.closest'tr'。查找'th.groupHeadCheck'。删除'checked'； } } }; 1. 2. 3.
您可以尝试以下方法： $table tbody.onchange，输入[type=checkbox]，函数e{ 如果$this.hasClass'groupHeadCheck'&&$this.is'：选中{ $this.closest'tr'。查找'td input'。属性'checked'，'checked'； } 否则如果$this.hasClass'groupHeadCheck'&&$this.not'：选中{ $this.closest'tr'。查找'td input'。删除'checked'； } 如果！$this.hassclass'groupHeadCheck'{ var total=$this.closest'tr'。查找'td input'。长度； var chekced=$this.closest'tr'。查找'td input:checked'。长度； iftotal==chekced{ $this.closest'tr'。查找'th.groupHeadCheck'。属性'checked'，'checked'； } 否则{ $this.closest'tr'。查找'th.groupHeadCheck'。删除'checked'； } } }; 1. 2. 3.
也可以使用此选项在开始时选中master的复选框 $table tbody .eachindex，tbody=>{ $tbody.find'tr'.eachindex，tr=>checkmastercheckboxesintrr } .onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var isChecked=此项已检查； 如果当前CB.is.groupHeadCheck{ var allCbs=currentCB.最近的'tr'。查找'[type=checkbox]'。属性'checked'，已检查； }否则{ checkmastercheckboxesintrurntcb.最近的'tr' } }; 函数checkmastercheckboxesintrtrt{ var allCbs=$tr.find'[type=checkbox]'； var allSlaves=allCbs.not.groupHeadCheck； var master=allCbs.filter.groupHeadCheck； var allChecked=allSlaves.filter:checked.length==allSlaves.length； master.propchecked，allChecked； } .groupHead td{背景色：CCC；} 1. 2. 3.
也可以使用此选项在开始时选中master的复选框 $table tbody .eachindex，tbody=>{ $tbody.find'tr'.eachindex，tr=>checkmastercheckboxesintrr } .onchange，输入[type=checkbox]，函数e{ var currentCB=$this； var isChecked=此项已检查； 如果当前CB.is.groupHeadCheck{ 弗吉尼亚州 r allCbs=currentCB.最近的'tr'。查找'[type=checkbox]'。属性'checked'，已检查； }否则{ checkmastercheckboxesintrurntcb.最近的'tr' } }; 函数checkmastercheckboxesintrtrt{ var allCbs=$tr.find'[type=checkbox]'； var allSlaves=allCbs.not.groupHeadCheck； var master=allCbs.filter.groupHeadCheck； var allChecked=allSlaves.filter:checked.length==allSlaves.length； master.propchecked，allChecked； } .groupHead td{背景色：CCC；} 1. 2. 3.
您的1和2对我来说似乎很好，如果您希望您的复选框水平，您可以将float:left添加到trs@ChrisLi如果你看到我在检查1。tr 2和3 tr正在被选中。您的1和2对我来说似乎很好，如果您希望您的复选框水平，您可以将float:left添加到trs@ChrisLi如果你看到我在检查1。tr 2和3 tr正在被选中。它工作正常，但仍需要修改，如果我们单独选择每个框，并且全部选中，则还应选中全部选中复选框。您可以按照要求进行@АаааЧааааабааааа。无论如何，谢谢您的帮助。@PullataPraveen您的意思是，如果我们选中第行中的任何复选框，您需要选中所有复选框，好吗？它工作正常，但仍需要修改。如果我们单独选择每个复选框，并选中所有复选框，则还应选中所有复选框。您可以按照要求进行@АаааЧааааабааааа。无论如何，谢谢你的帮助。@PullataPraveen你的意思是如果我们选中第行的任何复选框，你需要选中，好吗？