目标:
当您选中 id="bbbbbb"的复选框时,应选择所有内容;当您取消选择具有类“asdf”的特定复选框时,应取消选择 id="bbbbbb"的复选框。
问题:
我不知道该怎么做。
信息:
下面的代码今天在生产阶段使用。
谢谢!
$("#candy input[type=checkbox]").on("change", function () {
if (this.checked) {
$(this).parents('tr').addClass('selected');
$('#dd').removeClass('selected');
} else {
$(this).parents('tr').removeClass('selected');
$('#dd').removeClass('selected');
}
});
$('#bbbbbb').click(function () {
var checked = $("#bbbbbb").is(':checked');
$(".asdf").each(function () {
$(this).prop('checked', checked);
if (checked) {
$(this).parents('tr').addClass('selected');
$('#dd').removeClass('selected');
} else {
$(this).parents('tr').removeClass('selected');
$('#dd').removeClass('selected');
}
});
});
tr.selected {
background-color: #FEF0BF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="candy">
<tr id="dd">
<th>
<input type="checkbox" id="bbbbbb" />
</th>
<th width="20">a</th>
<th width="20">b</th>
<th width="20">c</th>
<th width="20">d</th>
<th width="20">e</th>
<th width="20 ">f</th>
<th width="20 ">g</th>
<th width="20 ">h</th>
</tr>
<tr>
<td><input type="checkbox" class="asdf" /></td>
<td>v</td>
<td>v</td>
<td>v</td>
<td>v</td>
<td>v</td>
<td>v</td>
<td>v</td>
<td>v</td>
<td>v</td>
</tr>
<tr>
<td><input type="checkbox" class="asdf" /></td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td><input type="checkbox" class="asdf" /></td>
<td>q</td>
<td>q</td>
<td>q</td>
<td>q</td>
<td>q</td>
<td>q</td>
<td>q</td>
<td>q</td>
<td>q</td>
</tr>
</table>
最佳答案
当触发change事件时,需要将元素id="bbbbbb"的checked属性设置为false。
这是更新的 fiddle :http://jsfiddle.net/qabnx4ph/27/
您只需添加
$('#bbbbbb').prop('checked', false);
更改事件中的其他条件。
关于javascript - 如何取消表格中的选中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32724094/