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

【问题标题】：jQuery - Uncheck other checkboxes if a specific checkbox is selected by userjQuery - 如果用户选择了特定复选框，则取消选中其他复选框
【发布时间】：2014-01-21 12:00:46
【问题描述】：

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

例子：

<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”被选中。

【问题讨论】：

大家好，我修复了 name="" 不一致的问题，我修复了 for="" 所以它不是 id="" (D'Oh!!!!)

标签： javascript jquery html checkbox

【解决方案1】：

对于label 而不是id 我认为你需要for

<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)
    }
})

演示：Fiddle

注意：我将为必须受omgwtfbbq 影响的所有输入元素添加一个公共类，并将var $others = $('#foo, #bar, #foobar, #barfoo') 更改为var $others = $('.myclassoninput')

【讨论】：

这是赢家！
但是您必须手动列出所有 ID。如果一个新的复选框被添加到组合中怎么办？
@Schien 只是为了展示如何选择复选框...需要根据 OP 的需要对其进行微调...
@Schien 这是因为 OP 没有父元素可以在包含的标记中选择它们。也就是说，这是确保您没有选择不应该选择的东西的唯一方法。
我明白了。我的解决方案是 ID 不可知论和自我反省。

【解决方案2】：

Live demo (click).

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

另请注意，您正在重复使用 id。 ID 只能在文档中使用一次。

【讨论】：

【解决方案3】：

如果您选择不给每个复选框一个连续的 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;

  }

}

现在您可以在每个复选框中调用此函数

<div id="checkgroup">
  <input id="abcd" onclick="checkone(this);">
  <input id="xyz" onclick="checkone(this);">
  ...
</div>

请注意，您甚至不需要关心名称，因为对象本身会传递。

【讨论】：