jQuery - 选中所有/取消选中所有复选框 - 然后取消选中(或选中)其他复选框
jQuery - check all/uncheck all checkboxes - then unchecking (or checking) additional ones
JQuery 1.9.1并使用IE8和Firefox作为浏览器。
我在这里发布了一个没有得到回答的问题 - 希望通过重新表述问题,我可以得到答案。
下面是我在网页上显示的表格中几行的 HTML。
<tr>
<td>
<label for="RoomNbr2" align="right"> Room No 2
<input type="checkbox" align="left" class="checkall" id="RoomNbr2" name="RoomNbr2">
</label>
</td>
<td>
<label for="PCNbr203" align="right"> 203
<input type="checkbox" align="left" id="PCNbr203" name="PCNbr203" class="RoomNbr2">
</label>
</td>
<td>
<label for="PCNbr204" align="right"> 204
<input type="checkbox" align="left" id="PCNbr204" name="PCNbr204" class="RoomNbr2">
</label>
</td>
</tr>
<tr>
<td>
<label for="RoomNbr3" align="right"> Room No 3
<input type="checkbox" align="left" class="checkall" id="RoomNbr3" name="RoomNbr3">
</label>
</td>
<td>
<label for="PCNbr310" align="right"> 310
<input type="checkbox" align="left" id="PCNbr310" name="PCNbr310" class="RoomNbr3">
</label>
</td>
<td>
<label for="PCNbr320" align="right"> 320
<input type="checkbox" align="left" id="PCNbr320" name="PCNbr320" class="RoomNbr3">
</label>
</td>
<td>
<label for="PCNbr340" align="right"> 340
<input type="checkbox" align="left" id="PCNbr340" name="PCNbr340" class="RoomNbr3">
</label>
</td>
<td>
<label for="PCNbr350" align="right"> 350
<input type="checkbox" align="left" id="PCNbr350" name="PCNbr350" class="RoomNbr3">
</label>
</td>
</tr>
如果用户单击房间 2,则检查房间 2 中的所有 PC(分配给单个 PC 的RoomNbr2
类(。 同样,如果选中 2 号房间然后取消选中,则具有该类的所有 PC 都将效仿。
我使用此代码监视房间的checkall
类:
$('#mytable').on('click','.checkall', function() {
$('input.' + this.id).prop('checked', this.checked);
});
我使用此代码来监视桌子上的单个点击:
$('#mytable').on('click', function() {
$('input.' + this.id).prop('checked', this.checked);
});
我需要做的是在选中房间 2(或 3(复选框并且其中一个从属复选框变为未选中状态时更改其状态。
例如:
如果我单击房间 2 号,房间 2 的复选框将变为选中状态,203 和 204 也将变为选中状态。
如果我取消选中 203,则 204应保持选中状态,房间 2 的复选框将变为未选中状态(不更改 204 复选框的状态(或进入不确定状态(视觉上显示以外的状态选中(。
在任何给定时间,我都知道检查了哪些机器:
$("input[name*=PC]:checked").map(function () {return this.name;}).get().join(",")
这是我真正想知道的。 我只是不希望">房间否">复选框指示在不再选中所有从属复选框时选中它们。 我找到的所有例子都是全检查/全部未检查的性质。
关于如何最好地解决这个问题的任何想法或方向,将不胜感激。
如何对照选中的复选框数量检查复选框的数量,并将每行的主复选框设置为选中、未选中或不确定?
js小提琴示例
$('#mytable').on('click', '.checkall', function () {
$('input.' + this.id).prop('checked', this.checked);
});
$('#mytable').on('click', 'input:not(.checkall)', function () {
var total = $(this).closest('tr').find('input:not(.checkall)').length;
var checked = $(this).closest('tr').find('input:not(.checkall):checked').length;
if (total == checked) {
$(this).closest('tr').find('input:first').prop('checked', true);
$(this).closest('tr').find('input:first').prop('indeterminate', false);
} else if (checked == 0) {
$(this).closest('tr').find('input:first').prop('checked', false);
$(this).closest('tr').find('input:first').prop('indeterminate', false);
} else {
$(this).closest('tr').find('input:first').prop('indeterminate', true);
}
});
如果复选框
未全部选中,如何将复选框设置为不确定?
$(".checkall").prop("indeterminate", true);
关于这个主题的一篇很好的文章:http://css-tricks.com/indeterminate-checkboxes/
这个策略呢?
$('input[type=checkbox]').on('click', function() {
var clickedCb = $(this);
var tr = $(this).closest('tr');
var mainCb = tr.children('td input')[0];
if (clickedCb == mainCb) { // probably this check is not 100% correct.
// do the checkall stuff
} else {
mainCb.prop('indeterminate', true);
}
}
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- 使用jquery选中/取消选中单个复选框
- 使用javascript在页面加载时取消选中所有复选框
- (取消)使用单独的复选框激活复选框列表
- jQuery-取消选中复选框
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- Javascript选中/取消选中所有复选框并将值写入文本区域
- dojo/cbtree取消选中所有复选框并选中选中复选框
- 通过选中和取消选中复选框来添加和删除数组中的值
- 当与之关联的 ng-model 为 false 时,Angularjs 复选框值不会取消选中
- 取消复选框未进行可视化更新
- 复选/取消复选框不能与prop功能一起工作
- 在剑道ui网格中上下滚动时取消复选框
- 检查条件后使用jQuery取消复选框
- 当另一个复选框被选中时,取消复选框,但如果被选中,也取消复选框
- JQuery .prop函数不工作,取消复选框
- 取消复选框绑定
- 如何在不取消复选框的情况下通过Ajax更新复选框列表
- 绑定点击事件后无法取消复选框