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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:55:49  来源:igfitidea点击:

jQuery. How to uncheck all checkboxes except one (which was checked)

jquerycheckboxuncheck

提问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 radiobutton and group them by name attributes. If you have to do it with checkboxesthen you can do it this way,

您可以使用radio按钮并按名称属性对它们进行分组。如果你必须这样做,checkboxes那么你可以这样做,

Live Demo

现场演示

$('.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 parentdivthen you can have

如果已知,文档可以被静态父级替换。例如,如果 div 包含动态生成的 has idparentdiv那么你可以拥有

`$('#parentdiv').on('click','.foo', function(){`

Edit

编辑

Use propinstead of attrfor properties checked, selected, or disabledas per documentation.

使用prop的,而不是attr对性能checkedselecteddisabled按文档。

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">&nbsp;Eaglesoft</label><br>
  <input type="checkbox" id="worker-soft-dentrix"><label for="worker-soft-dentrix">&nbsp;Dentrix</label><br>
  <input type="checkbox" id="worker-soft-softDent"><label for="worker-soft-softDent">&nbsp;Soft-Dent</label><br>
  <input type="checkbox" id="worker-soft-denticon"><label for="worker-soft-denticon">&nbsp;Denticon</label><br>
  <input type="checkbox" id="worker-soft-other"><label for="worker-soft-other">&nbsp;Other</label><br>

  <input type="checkbox" id="worker-soft-none" value="none">
  <label for="worker-soft-none">&nbsp;No Software Experience - Paper Records Only</label><br>
</div>