JavaScript “Check All” with Radio and Checkboxes

Question

I've got a function in JS that check all my checkboxes in a form:

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

I've recently added some radio buttons to my form, and my question is: will this function activate ALL my radio buttons too (I know that only one radio button can be selected, but I'm not sure how this works in a script like that..)?

Here you can find my form code:

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

If this don't work as I want, how can I solve it?

Answer 1

Testing is as simple as that : http://jsfiddle.net/yk9uD/

Content :

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

And the answer to the question is : No, it won't select all radio buttons.

The reason is that your code iterates only over inputs whose name is check :

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

Answer 2

No, it won't work for radio buttons. The name given for radio button is different than that of checkbox. So, your function does not touch radio buttons. But if you have created an event for class providing the radio buttons and the checkboxes same class name, the function would also include the radio buttons. But in that case, only the last radio button will be checked. In fact, all radio button gets checked while the code executes. But when the radio button with same name is found again, the previous checked attribute is removed and the checked attribute comes to current node.

Answer 3

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

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