jQuery。如何取消选中除一个之外的所有复选框(已选中)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13739115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery. How to uncheck all checkboxes except one (which was checked)
提问by Andrew
I have html items, 4 example:
我有 html 项目,4 个示例:
<div>
<div><input type="checkbox" class="foo"> Checkbox</div>
<div><input type="checkbox" class="foo"> Checkbox</div>
<div><input type="checkbox" class="foo"> Checkbox</div>
<div><input type="checkbox" class="foo"> Checkbox</div>
<div><input type="checkbox" class="foo"> Checkbox</div>
<div><input type="checkbox" class="foo"> Checkbox</div>
</div>
And now, I want next: If I click on any checkbox - the checkbox should be checked and other checkboxes should be unchecked. How can I do it?
现在,我想要下一个:如果我点击任何复选框 - 应该选中该复选框,并且应该取消选中其他复选框。我该怎么做?
回答by Adil
You can use radio
button and group them by name attributes. If you have to do it with checkboxes
then you can do it this way,
您可以使用radio
按钮并按名称属性对它们进行分组。如果你必须这样做,checkboxes
那么你可以这样做,
$('.foo').click(function(){
$('.foo').attr('checked', false);
$(this).attr('checked', true);
});
For dynamically generated html you need onthat allows you to delegate the event with static parent, you can use document with you do not know static parent.
对于动态生成的html你需要的,让您与委托父母静态的情况下,你可以使用文档与您不知道静的父母。
$(document).on('click','.foo', function(){
$('.foo').attr('checked', false);
$(this).attr('checked', true);
});
Document could be replaced by static parent if it is known. e.g. if div contain dynamically generated has id parentdiv
then you can have
如果已知,文档可以被静态父级替换。例如,如果 div 包含动态生成的 has idparentdiv
那么你可以拥有
`$('#parentdiv').on('click','.foo', function(){`
Edit
编辑
Use prop
instead of attr
for properties checked
, selected
, or disabled
as per documentation.
使用prop
的,而不是attr
对性能checked
,selected
或disabled
按文档。
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
从 jQuery 1.6 开始,.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性,例如表单元素的选中、选中或禁用状态,请使用 .prop() 方法。
回答by Joyal
Another solution
另一种解决方案
$('.foo').click(function(){
$('.foo').not(this).attr('checked', false);
});
回答by Sadee
jQuery V: 1.6 =<
jQuery V: 1.6 ==
$( ".foo" ).change(function() {
$('.foo').not(this).prop('checked', false);
});
回答by Beefjeff
Maybe this will help you:
也许这会帮助你:
.siblings("input[type='checkbox']").attr("checked", true);
will select all the checkboxes except for the one that was clicked.
将选中除被单击的复选框之外的所有复选框。
$("input[type=checkbox]").on("click", function() {
if ($(this).val() == "none") {
$(this).siblings("input[type=checkbox]").attr('checked', false);
} else {
$(this).siblings("input[value=none]").attr('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="worker-soft-eaglesoft" checked><label for="worker-soft-eaglesoft"> Eaglesoft</label><br>
<input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix"> Dentrix</label><br>
<input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent"> Soft-Dent</label><br>
<input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon"> Denticon</label><br>
<input type="checkbox" id="worker-soft-other"><label for="worker-soft-other"> Other</label><br>
<input type="checkbox" id="worker-soft-none" value="none">
<label for="worker-soft-none"> No Software Experience - Paper Records Only</label><br>
</div>