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

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

您可以使用单选按钮来执行此操作，它不需要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)"> 

虽然使用单选按钮控件可能是一种方法，但实际上只是评论而不是答案。