Solved

How to check/uncheck all radio buttons...

Posted on 2009-07-04
19
807 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Autoit restart command not working 6 69
Need help to rewrite script 3 80
Scripting vs. Programming languages 25 165
issue with beginner powershell script. 5 61
The following is a collection of cases for strange behaviour when using advanced techniques in DOS batch files. You should have some basic experience in batch "programming", as I'm assuming some knowledge and not further explain the basics. For some…
Ever wondered how to display how many visitors you have online. In this tutorial I will show you an easy but effective way to display the number of online visitors in WhizBase. In this article I assume you have read my previous articles and know …
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

810 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