使用收音机和复选框进行JavaScript“全部检查”

时间:2013-01-11 10:22:50

标签: javascript html forms checkbox radio-button

我在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>

如果这不能按我的意愿运作,我该如何解决?

3 个答案:

答案 0 :(得分:2)

测试就像那样简单: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++) {

答案 1 :(得分:1)

不,它对单选按钮不起作用。单选按钮的名称与复选框的名称不同。因此,您的功能不会触摸单选按钮。但是,如果您为类提供了一个事件,提供单选按钮和复选框相同的类名,该函数还将包括单选按钮。但在这种情况下,只会检查最后一个单选按钮。实际上,代码执行时会检查所有单选按钮。但是,当再次找到具有相同名称的单选按钮时,将删除先前检查的属性,并将checked属性转到当前节点。

答案 2 :(得分:0)

如果您想检查选中的哪个单选框,则可以使用以下代码。

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