Javascript jQuery-如果用户选中了特定复选框，则取消选中其他复选框

如果用户选择了特定的复选框，我想取消选中当前选中的所有复选框

例如：

<div>
    <label for="foo">
        <input type="checkbox" name="meh" id="foo" checked> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="meh" id="bar" checked> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="meh" id="foobar"> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="meh" id="barfoo" checked> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
    </label>
</div>

福
酒吧
福巴
巴福
omgwtfbbq

如果用户选中“omgwtfbbq”复选框，我希望所有其他可能被选中的框都被取消选中，并且“omgwtfbbq”是唯一被选中的框。

$('#omgwtfbbq').click(function() {
  $('input:checkbox').not(this).attr('checked', false);
});

---

还要注意，您使用的是id。Id在文档中只能使用一次。

如果您选择不为每个复选框提供顺序Id，以便可以使用数组，则有一个解决方案：

将所有控件放在一个div中，ID为“checkgroup”

然后JavaScript函数将执行以下操作：

function checkone(d){
  if (!d.checked) return; //if it's unchecked, then do nothing

  var group=document.getElementById('checkgroup');
  var os=group.getElementsByTagName('input');
  for (var i=0;i<os.length;i++){

    if (os[i].checked&&os[i]!=d) os[i].checked=false;

  }

}

功能检查一（d）{
如果（！d.checked）return；//如果未选中，则不执行任何操作
var group=document.getElementById（'checkgroup'）；
var os=group.getElementsByTagName（'input'）；
对于（var i=0；i对于
标签而不是
id
我认为您需要
对于

<div>
    <label for="foo">
        <input type="checkbox" name="foo" id="foo" checked /> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="bar" id="bar" checked /> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="foobar" id="foobar" /> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
    </label>
</div>

演示：

注意：我将向所有必须受
omgwtfbbq
影响的输入元素添加一个公共类，并将
var$others=$（'#foo，#bar，#foobar，#barfoo'）
更改为
var$others=$（'.myclassoninput'）
这是赢家！但是你必须手动列出所有ID。如果在组合中添加了一个新的复选框怎么办？@Schien只是为了显示如何选择复选框…需要根据OPs需要对其进行微调…@Schien这是因为OP在包含的标记中没有父元素来选择它们。也就是说，这是确保您没有选择不应该选择的内容的唯一方法。我明白了。我的解决方案是ID不可知和自我反思。嘿，所有人，我用名称“”不一致修复了问题，我修复了for=“”，因此它不是ID=“”（D'Oh！！！！）
<div>
    <label for="foo">
        <input type="checkbox" name="foo" id="foo" checked /> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="bar" id="bar" checked /> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="foobar" id="foobar" /> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
    </label>
</div>

var $others = $('input[type="checkbox"][name="meh"]').not('#omgwtfbbq')
$('#omgwtfbbq').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#omgwtfbbq').prop('checked', false)
    }
})