Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How to check/uncheck all radio buttons...

Posted on 2009-07-04
19
Medium Priority
?
817 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" />
...

0
Comment
Question by:nike_golf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 6
19 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24778591
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24778930
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
 
LVL 13

Author Comment

by:nike_golf
ID: 24779520
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
Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

 
LVL 41

Expert Comment

by:HonorGod
ID: 24779732
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24779733
oh... I missed something.
ok.

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

Author Comment

by:nike_golf
ID: 24779759
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 24779765
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
 
LVL 13

Author Comment

by:nike_golf
ID: 24779970
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24780069
Of course ONE checkbox value YES would be the same as two yes/no radios unless the user MUST click either
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24780074
Change
rb[ obj.checked ? 0 : 1 ].checked = true;

to

rb[ 1 ].checked = true;

to only check the second radio
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24780172
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24780214
Haha - I saw the second as Yes
0
 
LVL 13

Author Comment

by:nike_golf
ID: 24780237
<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
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 24780254
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
 
LVL 13

Author Comment

by:nike_golf
ID: 24780316
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24780374
It means Give the 0th radio (the first) the check of the ALL checkbox
0
 
LVL 13

Author Comment

by:nike_golf
ID: 24780517
OK, I was missing the fact that you were using the ALL checkbox as the driving force, nice...

Thanks for the help.

NG,
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24780678
YW - you are aware that you can split points?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24780893
Thank you for the grade & points.

Good luck & have a great day.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this tutorial I will show you how to provide a dynamic RTF document on your website generated with data from your database. For this tutorial you will need Microsoft Word or WordPad, WhizBase and Microsoft Access. In this tutorial I will show …
It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question