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）。像这样

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

使用javascript选择来自不同组的所有单选按钮

2 个答案: