javascript - 使用 javascript 从不同组中选择所有单选按钮

Question

我想知道是否有一种聪明的方法可以一次从不同的组中选择所有单选按钮。

这是一个旧网站，所以我不能使用 jquery。

这是我到目前为止得到的。

我将代码放在 codepen 上，对我来说它看起来很简单，但我认为也许有一些最简单的方法可以达到相同的结果。

代码笔

HTML：

<form name="form1">
  <input type="radio" name="group1" value="1">Yes<br />
  <input type="radio" name="group1" value="0">No<br />
  <input type="radio" name="group2" value="1">Yes<br />
  <input type="radio" name="group2" value="0">No<br />
  <input type="radio" name="group3" value="1">Yes<br />
  <input type="radio" name="group3" value="0">No
  <br />
  <br />
  <input type="radio" name="group4" value="1" onclick="selectAll(form1)">All Yes<br />
  <input type="radio" name="group4" value="0" onClick="selectAll(form1)" >All No
</form>

JAVASCRIPT：

    <script type="text/javascript">
    function selectAll(form1) {

      var check = document.getElementsByName("group4"),
            radios = document.form1.elements;

        if (check[0].checked) {

            for( i = 0; i < radios.length; i++ ) {

                if( radios[i].type == "radio" ) {

                    if (radios[i].value == 1 ) {

                        radios[i].checked = true;
                    }

                }

            }

        } else {

            for( i = 0; i < radios.length; i++ ) {

                if( radios[i].type == "radio" ) {

                    if (radios[i].value == 0 ) {

                        radios[i].checked = true;

                    }

                }

            }

        };
      return null;
    }
    </script>

Answer 1

试试这个。你需要将当前页面作为参数传递 onclick="selectAll(this).like this

<form name="form1">
  <input type="radio" name="group1" value="1">Yes<br />
  <input type="radio" name="group1" value="0">No<br />
  <input type="radio" name="group2" value="1">Yes<br />
  <input type="radio" name="group2" value="0">No<br />
  <input type="radio" name="group3" value="1">Yes<br />
  <input type="radio" name="group3" value="0">No
  <br />
  <br />
  <input type="radio" name="group4" value="1" onclick="selectAll(this)">All Yes<br />
  <input type="radio" name="group4" value="0" onClick="selectAll(this)" >All No
</form>

<script type="text/javascript">
function selectAll( check ) {
    var radio, i=0;
    while( radio=check.form.elements[i++] )
        if( radio.type == "radio" && radio.value == check.value )
            radio.checked = true;
};
</script>

Answer 2

如果您将 onclick 更改为selectAll(this)您可以摆脱这个：

function selectAll( check ) {
    var radio, i=0;
    while( radio=check.form.elements[i++] )
        if( radio.type == "radio" && radio.value == check.value )
            radio.checked = true;
};