We help IT Professionals succeed at work.

How to check/uncheck all radio buttons...

nike_golf
nike_golf asked
on
Medium Priority
916 Views
Last Modified: 2012-05-07
I have a form with 10 "Yes" and 10 "No" radio buttons and 1 "Check All" checkbox.

I want to be able to check all 10 Yes radio buttons by using a "Check All" checkbox. If the user checks the "Check All" checkbox all the "Yes" Radio buttons would check. If they uncheck the "Check All" checkbox all the "Yes" radio buttons would uncheck.

I'm not good at Javascript could someone help me with this?

The checkboxes are formatted as such:

<input type="radio" name="chk_accept1[]" value="accept" />
<input type="radio" name="chk_accept2[]" value="accept" />
<input type="radio" name="chk_accept3[]" value="accept" />
...

Comment
Watch Question

HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
It would be easiest if the name attribute were the same for all of the checkboxes.

For example:

<input type="radio" name="chk_accept" value="1" />
<input type="radio" name="chk_accept" value="2" />
<input type="radio" name="chk_accept" value="3" />

Then, you could do something simple like:



<html>
<head>
<title> CheckBox group </title>
<script type='text/javascript'>
  function check( obj ) {
    alert( obj.value )
  }
  function AllNone( obj ) {
    var rb = document.getElementsByName( 'group' );
    for ( r = 0; r < rb.length; r++ ) {
      rb[ r ].checked = obj.checked;
    }
  }
</script>
</head>
 
<body>
  <input type='checkbox' name='all'   onclick='AllNone(this)'>All</input>
  <input type='checkbox' name='group' onclick='check(this)' value='0'>0</input>
  <input type='checkbox' name='group' onclick='check(this)' value='1'>1</input>
  <input type='checkbox' name='group' onclick='check(this)' value='2'>2</input>
  <input type='checkbox' name='group' onclick='check(this)' value='3'>3</input>
  <input type='checkbox' name='group' onclick='check(this)' value='4'>4</input>
  <input type='checkbox' name='group' onclick='check(this)' value='5'>5</input>
  <input type='checkbox' name='group' onclick='check(this)' value='6'>6</input>
  <input type='checkbox' name='group' onclick='check(this)' value='7'>7</input>
  <input type='checkbox' name='group' onclick='check(this)' value='8'>8</input>
  <input type='checkbox' name='group' onclick='check(this)' value='9'>9</input>
</body>
</html>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
And of course use checkboxes and not radios

You CAN (and should I guess) give them the name chk_accept[]
and change to  var rb = document.getElementsByName( 'chk_accept[]' );

It is silly to create a php array of one item named chk_accept1[] and one of chk_accept2[]
when giving all the checkboxes the name chk_accept[] automatically creates the full array

Author

Commented:
I understand the naming convention concept that you guys laid out except the radios are in individual records so I think they have to be identified separately, maybe I'm wrong?

Check boxes give the appearance that more than one option is available, there is not, the user can choose only one item for each record.

So the record will look similar to this:


<input type="radio" name="chk_accept1[]" value="YES" /><input type="radio" name="chk_accept1[]" value="NO" />
<input type="radio" name="chk_accept2[]" value="YES" /><input type="radio" name="chk_accept2[]" value="NO" />
<input type="radio" name="chk_accept3[]" value="YES" /><input type="radio" name="chk_accept3[]" value="NO" />
...

So the 2 radio buttons in each recordset are in the same group, there are just 10 groups/recordsets...

NG,
HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
But Michel point out that with a group of radio buttons, only 1 many be selected at a time.  And once selected, you have to use something like JavaScript to deselect a single radio button.
HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
oh... I missed something.
ok.

So you want a Yes/No check box to select all Yes, or No radio buttons?

Author

Commented:
Yes, I'm really only interested in selecting all the "Yes" radios..

Keep in mind this is for a recordset as I posted above so the name will vary determined by what record the buttons are in.

<input type="radio" name="chk_accept1[]" value="YES" /><input type="radio" name="chk_accept1[]" value="NO" />
<input type="radio" name="chk_accept2[]" value="YES" /><input type="radio" name="chk_accept2[]" value="NO" />
<input type="radio" name="chk_accept3[]" value="YES" /><input type="radio" name="chk_accept3[]" value="NO" />
...

NG,
HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
You mean like this?
<html>
<head>
<title> CheckBox group </title>
<script type='text/javascript'>
  function check( obj ) {
    alert( obj.value )
  }
  function YesNo( obj ) {
    for ( var r = 1; r < 10; r++ ) {
      var rb = document.getElementsByName( 'chk_accept' + r + '[]' );
      rb[ obj.checked ? 0 : 1 ].checked = true;
    }
  }
</script>
</head>
 
<body>
  <input type='checkbox' name='all'   onclick='YesNo(this)'>Yes</input></br>
  Yes <input type="radio" name="chk_accept1[]" value="YES" /> No <input type="radio" name="chk_accept1[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept2[]" value="YES" /> No <input type="radio" name="chk_accept2[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept3[]" value="YES" /> No <input type="radio" name="chk_accept3[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept4[]" value="YES" /> No <input type="radio" name="chk_accept4[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept5[]" value="YES" /> No <input type="radio" name="chk_accept5[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept6[]" value="YES" /> No <input type="radio" name="chk_accept6[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept7[]" value="YES" /> No <input type="radio" name="chk_accept7[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept8[]" value="YES" /> No <input type="radio" name="chk_accept8[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept9[]" value="YES" /> No <input type="radio" name="chk_accept9[]" value="NO" /></br>
</body>
</html>

Open in new window

Author

Commented:
Very close!

When I click on "all" it does check the "yes" box but when I uncheck "all" it checks the "no" box and I don't want it to check the "no" only uncheck the "yes" box.

So, the function should only check or uncheck the "yes" box...

I think I explained that correctly.

Can you explain this part of the function for me? "rb[ obj.checked ? 0 : 1 ].checked = true;"

Since "var rb = document.getElementsByName( 'chk_accept' + r + '[]' );" will get the array of chk_accept(r)[] items how does it know if it has the "yes" / "no" value?


NG,
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Of course ONE checkbox value YES would be the same as two yes/no radios unless the user MUST click either
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Change
rb[ obj.checked ? 0 : 1 ].checked = true;

to

rb[ 1 ].checked = true;

to only check the second radio
HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
How about this?
<html>
<head>
<title> CheckBox group </title>
<script type='text/javascript'>
  function check( obj ) {
    alert( obj.value )
  }
  function YesNo( obj ) {
    if ( obj.checked ) {
      for ( var r = 1; r < 10; r++ ) {
        var rb = document.getElementsByName( 'chk_accept' + r + '[]' );
        rb[ 0 ].checked = true;
      }
    }
  }
</script>
</head>
 
<body>
  <input type='checkbox' name='all'   onclick='YesNo(this)'>Yes</input></br>
  Yes <input type="radio" name="chk_accept1[]" value="YES" /> No <input type="radio" name="chk_accept1[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept2[]" value="YES" /> No <input type="radio" name="chk_accept2[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept3[]" value="YES" /> No <input type="radio" name="chk_accept3[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept4[]" value="YES" /> No <input type="radio" name="chk_accept4[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept5[]" value="YES" /> No <input type="radio" name="chk_accept5[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept6[]" value="YES" /> No <input type="radio" name="chk_accept6[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept7[]" value="YES" /> No <input type="radio" name="chk_accept7[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept8[]" value="YES" /> No <input type="radio" name="chk_accept8[]" value="NO" /></br>
  Yes <input type="radio" name="chk_accept9[]" value="YES" /> No <input type="radio" name="chk_accept9[]" value="NO" /></br>
</body>
</html>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Haha - I saw the second as Yes

Author

Commented:
<script type='text/javascript'>
  function check( obj ) {
    alert( obj.value )
  }
  function YesNo( obj ) {
    if ( obj.checked ) {
      for ( var r = 1; r < 10; r++ ) {
        var rb = document.getElementsByName( 'chk_accept' + r + '[]' );
        rb[ 0 ].checked = true;
      }
    }
  }
</script>


The script above works and will choose all the "yes" radios - but when I uncheck the "all" checkbox they radios don't clear... so it works halfway.

NG,
Software Engineer
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Works great!

So if I read this correctly, it loops through all 10 radio buttons finds the button[0] and I don't understand this line "rb[ 0 ].checked = obj.checked;"

NG,
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
It means Give the 0th radio (the first) the check of the ALL checkbox

Author

Commented:
OK, I was missing the fact that you were using the ALL checkbox as the driving force, nice...

Thanks for the help.

NG,
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
YW - you are aware that you can split points?
HonorGodSoftware Engineer
CERTIFIED EXPERT

Commented:
Thank you for the grade & points.

Good luck & have a great day.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.