Solved

How to check/uncheck all radio buttons...

Posted on 2009-07-04
19
796 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html (http://www.experts-ex…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to dynamically set the form action using jQuery.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

708 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now