带有单选和复选框的 JavaScript“全选”答案

【问题标题】：JavaScript "Check All" with Radio and Checkboxes带有单选和复选框的 JavaScript“全选”
【发布时间】：2012-12-25 21:53:10
【问题描述】：

我在 JS 中有一个函数可以检查表单中的所有复选框：

function CheckAll(chk){
    for (i = 0; i < chk.check.length; i++)
        if (chk.All.checked==true){
            chk.check[i].checked = true;
            chk.check[i].disabled = true;
        }
        else {
            chk.check[i].disabled = false;
            chk.check[i].checked = false;
        }
}

我最近在我的表单中添加了一些 radio 按钮，我的问题是：此功能是否也会激活所有我的单选按钮（我知道只有可以选择一个单选按钮，但我不确定它在这样的脚本中是如何工作的..)？

在这里你可以找到我的表单代码：

<form name='MyForm'>
    <b>This is my Simple Form</b></br>
    </br>
    <input type='radio' name='parameter' value='ONE' checked='checked' />ONE<br/>
    <input type='radio' name='parameter' value='TWO' />TWO<br/>
    <input type='radio' name='parameter' value='THREE' />THREE<br/>
    <input type='radio' name='parameter' value='FOUR' />FOUR<br/>
    <input type='radio' name='parameter' value='FIVE' />FIVE<br/>
    <input type='radio' name='parameter' value='SIX' />SIX<br/>
    <input type='radio' name='parameter' value='SEVEN' />SEVEN<br/>
    <script>
        document.write("</br>");
        var count
        var check_value = new Array()
        check_value[0] = "001"
        check_value[1] = "002"
        check_value[2] = "003"
        check_value[3] = "004"
        for(count in check_value){
            var checkbox = "<input type='checkbox' name='check' value='"+check_value[count]+"' />"
            document.write(checkbox + check_value[count] + "  ");
        }
        document.write("<input type='checkbox' name='All' value='All' onClick='CheckAll(document.MyForm);' /> All");
    </script>
    </br>
    </br>
    <input type=button value='Ok' onClick='foo(document.MyForm);'>
</form>

如果这不能按我的意愿工作，我该如何解决？

【问题讨论】：

你测试了吗？如果不是，为什么？
因为目前我无法修改servlet，因为我没有源代码，只有.class。 foo 函数会在对数据进行一些详细说明后向其发送一些参数，但在发送它们之前，我想知道它是如何工作的。
您不能检查多个收音机，因此只会激活最后一个收音机而且您传递了错误的对象。传递 this.form.parameter
@abierto：对不起。我只是说你的代码需要很多改进。在每一行的末尾使用分号;，不要使用document.write()，使用文字而不是new Array()...这与您的问题完全无关。我只是说。
@abieto：阅读stackoverflow.com/questions/802854/…和stackoverflow.com/questions/1094723/…

标签： javascript html forms checkbox radio-button

【解决方案1】：

测试就这么简单：http://jsfiddle.net/yk9uD/

内容：

<form name='MyForm'>
    <b>This is my Simple Form</b></br>
    </br>
    <input type='radio' name='parameter' value='ONE' checked='checked' />ONE<br/>
    <input type='radio' name='parameter' value='TWO' />TWO<br/>
    <input type='radio' name='parameter' value='THREE' />THREE<br/>
    <input type='radio' name='parameter' value='FOUR' />FOUR<br/>
    <input type='radio' name='parameter' value='FIVE' />FIVE<br/>
    <input type='radio' name='parameter' value='SIX' />SIX<br/>
    <input type='radio' name='parameter' value='SEVEN' />SEVEN<br/>
    <script>
      function CheckAll(chk){
  for (i = 0; i < chk.check.length; i++) {
        if (chk.All.checked==true){
            chk.check[i].checked = true;
            chk.check[i].disabled = true;
        }
        else {
            chk.check[i].disabled = false;
            chk.check[i].checked = false;
        }
}
}
        document.write("</br>");
        var count;
        var check_value = new Array()
        check_value[0] = "001"
        check_value[1] = "002"
        check_value[2] = "003"
        check_value[3] = "004"
        for(count in check_value){
            var checkbox = "<input type='checkbox' name='check' value='"+check_value[count]+"' />"
            document.write(checkbox + check_value[count] + "  ");
        }
        document.write("<input type='checkbox' name='All' value='All' onClick='CheckAll(document.MyForm);' /> All");
    </script>
    </br>
    </br>
    <input type=button value='Ok' onClick='foo(some var);'>
</form>

问题的答案是：不，它不会选择所有单选按钮。

原因是您的代码仅对名称为 check 的输入进行迭代：

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

【讨论】：

那么，在我的情况下，第一个将保持选中状态？仅此而已？
CheckAll 函数只修改名称为“check”的输入，因此无法触摸单选按钮。

【解决方案2】：

不，它不适用于单选按钮。单选按钮的名称与复选框的名称不同。因此，您的功能不会触及单选按钮。但是，如果您为提供单选按钮和复选框的类创建了一个事件，则该函数还将包括单选按钮。但在这种情况下，只会检查最后一个单选按钮。事实上，所有单选按钮都会在代码执行时被选中。但是当再次找到同名的单选按钮时，之前的checked属性被移除，checked属性来到当前节点。

【讨论】：

【解决方案3】：

如果你想检查哪个单选框被选中，那么你可以使用以下代码。

$('.myclass input[name="radio_box_name"]:checked').val())

【讨论】：