Question

所以我使用这个函数来制作它，这样我一次只能选择一个复选框。

function checkOnly(stayChecked) {
                with (document.drinkList) {
                    for (i = 0; i < elements.length; i++) {
                        if (elements[i].checked == true && elements[i].name != stayChecked.name) {
                            elements[i].checked = false;
                        }
                    }
                }
            }

此代码有效，但是，在选中复选框后，我的表单中的所有单选按钮都将被取消选中。有什么办法可以通过使用当前代码来解决这个问题吗？感谢。

Answer 1

Radiobuttons也具有checked属性，因此，当您迭代所有元素时，无线电按钮也会被取消选择。您可以通过检查元素的tagName属性来避免这种情况，这样您就可以检查它是否是一个复选框。

但实际上你不应该这样做。不要编写脚本以仅允许选中一个复选框。请改用radiobuttons。如果您只能选择一个选项，则Radiobuttons是要使用的控件，而复选框用于多个选项。你现在基本上是脚本复选框，其行为类似于radiobuttons，这很容易出错并且不便于用户使用，因为它违背了预期。

无论如何，如果你想这样做，你可以使用以下代码片段来完成。它不使用jQuery，虽然它确实使用了一些仅在更新的浏览器中可用的Javascript。加载DOM后，它仅将click事件绑定到复选框。单击此类复选框将取消选择所有其他复选框。此外，您无法通过再次单击取消选中该复选框本身。这样，行为就像一个单选按钮。所以，是的，你可以。但是，不，你不应该。 :)

window.addEventListener('DOMContentLoaded', function(){
  
  // Get all checkboxes and bind a click event handler to them
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  
  for (var i = 0; i < checkboxes.length; i++) {
    
    checkboxes[i].addEventListener('click', function(){

      // When clicked, iterate over the checkboxes again. 
      // If the iterated box is not the clicked one, unselect it.
      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != this) {
          checkboxes[i].checked = false;
        }
      }

      // If the one that was clicked in unselected, reselect it.
      if (this.checked == false) {
         this.checked = true;
      }  
      
    });
    
  }
  
});

<input type="checkbox">Choice 1<br>
<input type="checkbox">Choice 2<br>
<input type="checkbox">Choice 3<br>
<input type="checkbox">Choice 4<br>
<input type="checkbox">Choice 5<br>
<input type="checkbox">Choice 6<br>

Answer 2

您似乎正在遍历表单中的所有元素，而不仅仅是复选框组中的元素，因此您正在抓住您刚检查过的一个复选框，将其保留下来不受影响，并清除你迭代的所有其他元素。

你在使用jQuery吗？您可以相当轻松地选择粒度更高的元素，请确保您只是获取了您已解雇该函数的组中的复选框，并确保您只是迭代这些元素。

我也想知道，如果您使复选框的行为类似于单选按钮，为什么不使用单选按钮？

另一种选择是在清除之前确认您选择的元素的类型。

type == "checkbox"

然后只清除类型==＆＃34;复选框＆＃34;

的元素

elements [i] .checked == true＆amp;＆amp; elements [i] .name！= stayChecked.name＆amp;＆amp;要素[i] .type ==＆＃34;复选框＆＃34;

这个功能是否也取消选择单选按钮的原因？

2 个答案: