[英]When one checkbox is checked in a group, disable & uncheck all other checkboxes
[英]How to uncheck a group of checkboxes when another checkbox is checked
我在我正在开发的网站上创建了一个搜索功能,但我仍然坚持这一部分。 搜索功能有一个类别列表,用户可以检查或取消选中这些类别以过滤项目。 这些选项几乎与Coursera实现其搜索功能的方式相同。 我希望在选中“ 所有类别”选项时取消选中所有其他复选框,并在取消选中其他任何内容时取消选中“ 所有类别”复选框。 这听起来有点令人困惑,但它正是该网站实施的内容。
这是代码的示例:
<div class="filter-grade">
<label class="checkbox">
<input type="checkbox" id="grade-all" name="grade[]" value="0" checked><b>All Grades</b>
</label>
<label class="checkbox">
<input type="checkbox" id="grade-9" name="grade[]" value="9">Grade 9
</label>
<label class="checkbox">
<input type="checkbox" id="grade-10" name="grade[]" value="10">Grade 10
</label>
<label class="checkbox">
<input type="checkbox" id="grade-11" name="grade[]" value="11">Grade 11
</label>
<label class="checkbox">
<input type="checkbox" id="grade-12" name="grade[]" value="12">Grade 12
</label>
</div>
尽管我的评论,我还是建立了一个小提琴: http : //jsfiddle.net/ctnCn/5/
$('.group input').on('change', function() {
var $inputs = $(this).siblings('input').add(this),
$checked = $inputs.filter(':checked'),
$all = $inputs.eq(0),
index = $inputs.index(this);
(index === 0 ? $checked : $all).removeAttr('checked');
if(index === 0 || $checked.length === 0) {
$all.attr('checked', 'checked');
}
});
更新为特定项目: http : //jsfiddle.net/ctnCn/6/
$('.filter-grade input').on('change', function() {
var $inputs = $(this).closest('div').find('input'),
虽然我想指出这不是标签元素的标准用法。 我建议更改你的标记,使标签和输入成为兄弟姐妹(并使用“id”和“for”属性来链接它们)。 看看这个参考: http : //www.w3schools.com/tags/tag_label.asp我以前的小提琴也提供了标准标记约定的一个例子。
这段代码也在做伎俩。从ArraryKnigh的答案中获取正确的路径。 你也可以检查小提琴 :
$('.group :checkbox').filter("[class!='group-all']").on('change', function() {
var parentDiv=$(this).parent();
$('.group-all',parentDiv ).attr('checked',false);
});
$('.group :checkbox').filter("[class='group-all']").on('change', function() {
var parentDiv=$(this).parent();
$('input',parentDiv ).attr('checked',false);
$(this).attr('checked',true);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.