我有一个包含多个复选框组的表单.
每个复选框选项都有一个名为的自定义html 5属性itemtype
.当type ="checkbox"的输入发生变化时,我需要评估刚刚选中的复选框.如果它的data-itemtype
值等于'Skipper',我想取消选中属于同一组的所有其他复选框.
换句话说,假设我有多个复选框,其中一个复选框选项有一个名为"None"的标签,如果用户选中"None",则应该选择Nothing但是"None".我不能在这里使用单选按钮,因为如果没有选择"无",我希望用户能够检查多个选项.
这是我的代码细分
CHECKBOX GROUP 1
Zulauf Ltd
Ziemann, McLaughlin and Kohler None
CHECKBOX GROUP 2
First Options
Some other option None
我创建了一个小提琴,告诉你我做了什么以及整个表格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();
如果选择"无",我该怎么做才能解除所有选项?
希望这对你有用
$(: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();
UPDATE
工作时尚
更新2
工作时间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
工作时间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)
仅指向CURRENT SINGLE ELEMENT,而不是全部.
您使用.attr("checked",false)
的也是不正确的,它应该是.attr("checked","checked")
或者
.prop("checked",true)
.