How to check/uncheck all radio buttons...

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" />
...

LVL 13
nike_golfAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HonorGodSoftware EngineerCommented:
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

0
Michel PlungjanIT ExpertCommented:
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
0
nike_golfAuthor 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,
0
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

HonorGodSoftware EngineerCommented:
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.
0
HonorGodSoftware EngineerCommented:
oh... I missed something.
ok.

So you want a Yes/No check box to select all Yes, or No radio buttons?
0
nike_golfAuthor 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,
0
HonorGodSoftware EngineerCommented:
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

0
nike_golfAuthor 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,
0
Michel PlungjanIT ExpertCommented:
Of course ONE checkbox value YES would be the same as two yes/no radios unless the user MUST click either
0
Michel PlungjanIT ExpertCommented:
Change
rb[ obj.checked ? 0 : 1 ].checked = true;

to

rb[ 1 ].checked = true;

to only check the second radio
0
HonorGodSoftware EngineerCommented:
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

0
Michel PlungjanIT ExpertCommented:
Haha - I saw the second as Yes
0
nike_golfAuthor 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,
0
HonorGodSoftware EngineerCommented:
oh, you really want the selections unchecked?

That I did not expect.

Like this then?
<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[ 0 ].checked = obj.checked;
    }
  }
</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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nike_golfAuthor 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,
0
Michel PlungjanIT ExpertCommented:
It means Give the 0th radio (the first) the check of the ALL checkbox
0
nike_golfAuthor Commented:
OK, I was missing the fact that you were using the ALL checkbox as the driving force, nice...

Thanks for the help.

NG,
0
Michel PlungjanIT ExpertCommented:
YW - you are aware that you can split points?
0
HonorGodSoftware EngineerCommented:
Thank you for the grade & points.

Good luck & have a great day.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.