Question

我正在尝试使用户一次只能在页面上选择1个复选框的地方。

到目前为止，这是我的代码：

function onlyOne(checkbox) {
  var checkboxes = document.getElementsByName('active', 'inactive',
    'showall')
  checkboxes.forEach((item) => {
    if (item !== checkbox) item.checked = false
  })
}

<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="inactive" value="Yes" onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="showall" value="Yes" onclick="onlyOne(this)">

一直在发生的事情是，有时它会工作，有时他们可以选择多个复选框。我需要进行哪些调整才能使其始终正常工作。

Answer 1

HTML DOM getElementsByName（）方法获取具有指定名称的所有元素

所以在您的代码中，只有名字是活动的；

结果，复选框列表的长度为1，这就是代码无法正常工作的原因。

如果您想确保我所说的是真的，请将您的代码更改为此，并且您的逻辑将正常工作：

    function onlyOne(checkbox) {
        var checkboxes = document.getElementsByName('active');
        checkboxes.forEach((item) => {
            if (item !== checkbox) 
            item.checked = false;
        })
    }

<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="active" value="Yes" 
onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">

由于其他人建议使用单选按钮，所以我只想为您清除该按钮要容易得多。

编辑：

如果您仍要使用复选框，请使用querySelectorAll而不是getElementsByName

var checkboxes = document.querySelectorAll('[name="active"], [name="inactive"], [name="showall"]');

Answer 2

您可以使用radio buttons来执行此操作，它不需要JavaScript，并且几乎所有内容（包括Internet Explorer）都支持它。它们可以像这样使用：

<div>
  <strong>Active</strong>
  <input type="radio" name="select" id="active" checked> <!-- Checked means that it is initially selected -->
</div>
<div>
  <strong>Inactive</strong>
  <input type="radio" name="select" id="inactive">
</div>
<div>
  <strong>Show All</strong>
  <input type="radio" name="select" id="showall">
</div>

请注意，由于技术上它们都是相同的输入，因此它们都必须具有相同的名称，但是您可以使用ID来告知它们是否确实需要。

Answer 3

使用单选按钮将是首选。但是，如果您确实要使用复选框，则可以使用以下方法。

<strong>Active</strong>
<input type="checkbox" name="chkbox" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="chkbox" value="Yes" 
onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox"  name="chkbox" value="Yes" onclick="onlyOne(this)">
<script>
function onlyOne(checkbox) {
    var checkboxes = document.getElementsByName('chkbox')
    checkboxes.forEach((item) => {
        item.checked = false
    })
    checkbox.checked = true
}
</script>

请注意，所有输入字段的名称属性都相同。

Answer 4

getElementsByName()仅接受一个参数。您要提供的其他参数将被忽略，因此您只在处理active复选框。

将所有复选框都设为同一个类，并改用getElementsByClassName()。

function onlyOne(checkbox) {
  var checkboxes = Array.from(document.getElementsByClassName('radio'))
  checkboxes.forEach((item) => {
    if (item !== checkbox) item.checked = false
  })
}

<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" class="radio" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="inactive" value="Yes" class="radio" onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="showall" value="Yes" class="radio" onclick="onlyOne(this)">

Answer 5

您使用的getElementsByName错误，因为您只能将一个名称传递给它，而且它不是一个数组，所以您不能forEach。
您可以使用querySelectorAll来查询多个名称，也可以使用Array原型中的forEach。

function onlyOne(checkbox) {
    var checkboxes = document.querySelectorAll('[name=active],[name=inactive],[name=showall]') 
    Array.prototype.forEach.call(checkboxes, (item,i) => { 
        if (item !== checkbox) item.checked = false
    })
}

<strong>Active</strong>
<input type="checkbox" name="active" value="Yes" onclick="onlyOne(this)">
<strong>Inactive</strong>
<input type="checkbox" name="inactive" value="Yes" 
onclick="onlyOne(this)">
<strong>Show All</strong>
<input type="checkbox" name="showall" value="Yes" onclick="onlyOne(this)">

虽然可以使用单选按钮控件，但这实际上只是评论，而不是答案。

在组中仅选中一个复选框，该复选框不起作用100％

5 个答案: