如何取消选中除使用 jQuery 的复选框之外的所有复选框?
Posted
技术标签:
【中文标题】如何取消选中除使用 jQuery 的复选框之外的所有复选框?【英文标题】:How to uncheck all checkboxes except the one using jQuery? 【发布时间】:2016-04-03 22:47:15 【问题描述】:我有一个包含多个复选框组的表单。
每个复选框选项都有一个名为 itemtype
的自定义 html 5 属性。当 type="checkbox" 的输入发生变化时,我需要评估刚刚选中的复选框。如果data-itemtype
的值等于'Skipper',我想取消选中所有其他属于同一组的复选框。
换句话说,假设我有多个复选框,并且其中一个复选框选项有一个名为“无”的标签,如果用户选中“无”,则应该选择“无”。我不能在这里使用单选按钮,因为如果未选择“无”,我希望用户能够检查多个选项。
这是我的代码分解
复选框组 1
<input name="control_307[0][307:1003]" id="item_307_1003_0" value="307:1003" data-itemtype="Answer" type="checkbox"> Zulauf Ltd<br>
<input name="control_307[0][307:361]" id="item_307_361_0" value="307:361" data-itemtype="Answer" type="checkbox"> Ziemann, McLaughlin and Kohler
<input name="control_307[0][308:1013]" id="item_307_1013_0" value="308:1013" data-itemtype="Skipper" type="checkbox"> None<br>
复选框组 2
<input name="control_1000[0][1000:999]" id="item_1000_999_0" value="307:1003" data-itemtype="Answer" type="checkbox"> First Options<br>
<input name="control_1000[0][1000:666]" id="item_1000_666_0" value="1000:666" data-itemtype="Answer" type="checkbox"> Some other option
<input name="control_1000[0][1000"123]" id="item_1000_123_0" value="308:1013" data-itemtype="Skipper" type="checkbox"> None<br>
我创建了一个小提琴来向您展示我所做的以及整个表单https://jsfiddle.net/8yf0v3xt/13/
我试图做这样的事情,但没有工作
$(:checkbox).change(function()
var skipper = $("input:checkbox[data-itemtype='Skipper']");
if( skipper.is(":checked"))
$(this).attr('checked', false); //uncheck all the boxes for the current group
skipper.attr('checked', true); //re-check the box that caused everything to uncheck
).change();
如果选择“无”,我该怎么做才能取消所有选项?
【问题讨论】:
@MikeA 我想这就是你想要的? jsfiddle.net/8yf0v3xt/14 @ketan 只是阻止点击任何具有船长项目类型的复选框。 【参考方案1】:希望这对你有用
$(:checkbox).change(function()
var skipper = $("input:checkbox[data-itemtype='Skipper']");
if( skipper.is(":checked"))
//$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group
//skipper.attr('checked', true); //re-check the box that caused everything to uncheck
$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT
).change();
更新
WORKING FIDDLE
更新 2
WORKING FIDDLE 2
$(:checkbox).change(function()
var skipper = $("input:checkbox[data-itemtype='Skipper']");
if( skipper.is(":checked"))
//$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group
//skipper.attr('checked', true); //re-check the box that caused everything to uncheck
//$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT
//THIS IS IMPORTANT
$(this).closest(".survey-control-fieldset").find(":checkbox").not(skipper).prop("checked",false);
).change();
更新 3
WORKING FIDDLE 3
$(:checkbox).change(function()
var skipper = $("input:checkbox[data-itemtype='Skipper']");
if( skipper.is(":checked"))
//$(":checkbox").attr('checked', false); //uncheck all the boxes for the current group
//skipper.attr('checked', true); //re-check the box that caused everything to uncheck
//$(":checkbox").not(skipper).prop("checked",false);//THIS IS IMPORTANT
//THIS IS IMPORTANT
$(this).closest(".survey-control-fieldset").find(":checkbox").not(skipper).prop("checked",false);
else
$(this).closest(".survey-control-fieldset").find(":checkbox[data-itemtype='Skipper']").prop("checked",false);
).change();
结论
我注意到您的代码中有几点错误如下。
您使用 $(this).attr("checked",false);
取消选中所有
复选框是错误的。 $(this)
指向 当前单曲
仅限 ELEMENT,而非全部。
您使用的是.attr("checked",false)
,这也是不正确的,它
应该是.attr("checked","checked")
或
.prop("checked",true)
。
【讨论】:
这是如何将任何复选框置于其组的上下文中的?这不会对页面上的所有复选框都起作用吗? 我已经用小提琴更新了代码。我们可以过滤我们想要的复选框。 当您检查任何字段集中的船长时,它将清除页面上的任何复选框,无论天气是否在同一字段集中。这是预期的操作吗? 是的,这就是我所说的。需要使用父字段集作为上下文来执行复选框操作。我想你明白了!我们会看看 OP 是怎么想的...... :-) @Hemal 非常感谢。小提琴 2 是我正在寻找的。但是,我需要更改的一件事是当某些人在选择“无”后选择一个选项时。没有一个应该被取消选中。以上是关于如何取消选中除使用 jQuery 的复选框之外的所有复选框?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 JavaScript 或 jquery 选中/取消选中复选框?
如何实现Jquery复选框选中全部/取消选中带有复选框的所有功能?