如何取消选中 jquery 中最近的 header 复选框。不同行中有多个标题,当所有子复选框均未选中时,需要取消选中标题中的复选框。
标题复选框位于“jq_idtHeaderEdit”类中,子复选框位于“jq_border_label”类中。
1- 在子复选框更改事件中,如何检查“jq_border_label”类中的所有子复选框是否都未选中?
2-如果所有子复选框都未选中,则取消选中最接近的类“jq_idtHeaderEdit”中的标题。
这就是表格的样子;
<tbody>
<tr class="jq_idtHeaderRow"></tr>
<tr class="jq_idtListRow"></tr>
<tr class="jq_idtHeaderRow"></tr>
<tr class="jq_idtListRow">
<td class="jq_idtContentEdit" valign="top" colspan="6">
<table>
<tbody>
<tr>
<td class="jq_idtContentEdit"></td>
<td class="jq_idtContentEdit"></td>
<td class="jq_idtContentEdit"></td>
</tr>
扩展表格
<table id="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_tblEdit">
<tbody>
<tr class="jq_idtHeaderRow"></tr>
<tr class="jq_idtListRow"></tr>
<tr class="jq_idtHeaderRow"></tr>
<td class="jq_idtHeaderEdit" colspan="6">
<input id="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_ctl24" type="checkbox" value="160" checked="checked" name="ctl00$ContentPlaceHolder1$tabContainer$tabDetails$idtDiscipline$ctl24"></input>
<label for="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_ctl24"></label>
</td>
<tr class="jq_idtListRow">
<td class="jq_idtContentEdit" valign="top" colspan="6">
<table>
<tbody>
<tr>
<td class="jq_idtContentEdit">
<div class="jq_border_label_container">
<div class="border_label_box">
<span class="jq_border_label" style="background-color: whitesmoke; color: rgb(0, 0, 0);"
<input id="ctl00_ContentPlaceHolder1_tabContainer_tabDetails_idtDiscipline_ctl32" name="ctl00$ContentPlaceHolder1$tabContainer$tabDetails$idtDiscipline$ctl32" checked="checked" value="197" type="checkbox">
fiddle
https://jsfiddle.net/m1Lmg616/6/
我希望当 Header-2 的所有子复选框均未选中时也未选中。
我已经在子复选框的“onchange”事件中尝试过此操作,但到目前为止没有运气;
var jqo = $(this);
if ($(jqo).closest('.jq_border_label').find('input[type=checkbox]').prop('checked').length > 0) {
alert('at least one ticked');
}
最佳答案
$('.chkChildHeader').on('change', function () {
var checkedNum = $('.jq_border_label > input[type="checkbox"]:checked').length;
if (checkedNum > 0) {
$(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', true);
} else {
$(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', false);
}
});
I have prepared the following sample demo and below is the js fiddle link: https://jsfiddle.net/shrawanlakhe/41v9s4vv/15/
我认为你可以使用它作为引用来解决你的问题,因为你没有提供 fiddle 来解决你的问题..
Fiddle 显示,即使只选中一个复选框,标题复选框也是复选框,如果没有选中任何子复选框,则标题复选框未被选中。
如果您只想在选中所有子复选框时才进行复选框,那么下面是您可以使用的代码
$('.chkChildHeader').on('change', function () {
var length = $('.jq_border_label > input[type="checkbox"]').length;
var checkedNum = $('.jq_border_label > input[type="checkbox"]:checked').length;
if (length === checkedNum) {
$(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', true);
}
if (!checkedNum) {
$(this).closest('.jq_idtHeaderEdit').find('.chkBoxHeader').prop('checked', false);
}
});
下面是 fiddle 链接: https://jsfiddle.net/shrawanlakhe/1ecqs3bu/1/
关于javascript - 如何取消选中 jquery 中最接近的标题复选框 - 具有同一类的多行中的多标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28523735/