By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,327 Members | 2,627 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,327 IT Pros & Developers. It's quick & easy.

Array of Radio buttons, detect the one selected

P: 7
in a webpage with 12 radio buttons that have the same name, how can i detect the one that is checked?
Feb 4 '14 #1
Share this Question
Share on Google+
8 Replies


Dormilich
Expert Mod 5K+
P: 8,639
with CSS3s :checked selector.
Feb 4 '14 #2

P: 17
What is the purpose of giving an answer that applies to only one browser?

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5.  
  6. <title> Radio Button Picks </title>
  7.  
  8. </head>
  9. <body>
  10. <div id="rBtns">
  11. Pick: <br>
  12. <input type="radio" name="rBtns" value="0"> 0
  13. <input type="radio" name="rBtns" value="1"> 1
  14. <input type="radio" name="rBtns" value="2"> 2
  15. <input type="radio" name="rBtns" value="3"> 3
  16. <input type="radio" name="rBtns" value="4"> 4
  17. <input type="radio" name="rBtns" value="5"> 5
  18. <input type="radio" name="rBtns" value="6"> 6<br>
  19. <input type="radio" name="rBtns" value="7"> 7
  20. <input type="radio" name="rBtns" value="8"> 8
  21. <input type="radio" name="rBtns" value="9"> 9
  22. <input type="radio" name="rBtns" value="10"> 10
  23. <input type="radio" name="rBtns" value="11"> 11
  24. <input type="radio" name="rBtns" value="12"> 12
  25. </div>
  26.  
  27. <script type="text/javascript">
  28. // For: http://bytes.com/topic/javascript/answers/954639-array-radio-buttons-detect-one-selected
  29.  
  30. function getRBtnName(GrpName) {
  31.   var sel = document.getElementsByName(GrpName);
  32.   var fnd = -1;
  33.   var str = '';
  34.   for (var i=0; i<sel.length; i++) {
  35.     if (sel[i].checked) { str = sel[i].value;  fnd = i; }
  36.   }
  37. //  return fnd;   // return option index of selection
  38. // comment out next line if option index used in line above  
  39.   return str;
  40. window.onload = function() {
  41.   var obj = document.getElementById('rBtns').getElementsByTagName('input');
  42.   for (var i=0; i<obj.length; i++) { obj[i].onclick=function() { alert(this.value); } }
  43. }
  44. </script>
  45.  
  46. </body>
  47. </html>
  48.  
Or alternatively,
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title> Radio Button Picks </title>
  6. </head>
  7. <body>
  8.  
  9. Pick: <br>
  10. <input type="radio" name="rBtns" value="0"> 0
  11. <input type="radio" name="rBtns" value="1"> 1
  12. <input type="radio" name="rBtns" value="2"> 2
  13. <input type="radio" name="rBtns" value="3"> 3
  14. <input type="radio" name="rBtns" value="4"> 4
  15. <input type="radio" name="rBtns" value="5"> 5
  16. <input type="radio" name="rBtns" value="6"> 6<br>
  17. <input type="radio" name="rBtns" value="7"> 7
  18. <input type="radio" name="rBtns" value="8"> 8
  19. <input type="radio" name="rBtns" value="9"> 9
  20. <input type="radio" name="rBtns" value="10"> 10
  21. <input type="radio" name="rBtns" value="11"> 11
  22. <input type="radio" name="rBtns" value="12"> 12<br>
  23.  
  24. <script type="text/javascript">
  25. // For: http://bytes.com/topic/javascript/answers/954639-array-radio-buttons-detect-one-selected
  26.  
  27. function getRBtnName(GrpName) {
  28.   var sel = document.getElementsByName(GrpName);
  29.   var fnd = -1;
  30.   var str = '';
  31.   for (var i=0; i<sel.length; i++) {
  32.     if (sel[i].checked) { str = sel[i].value;  fnd = i; }
  33.   }
  34. //  return fnd;   // return option index of selection
  35. // comment out next line if option index used in line above  
  36.   return str;
  37. window.onload = function() {
  38.   var obj = document.getElementsByName('rBtns');
  39.   for (var i=0; i<obj.length; i++) { obj[i].onclick=function() { alert(this.value); } }
  40. }
  41. </script>
  42.  
  43. </body>
  44. </html>
  45.  
Feb 18 '14 #3

Dormilich
Expert Mod 5K+
P: 8,639
What is the purpose of giving an answer that applies to only one browser?
not sure what system you usually work with, but :checked is supported by all modern browsers (and that includes IE9).

of course, ancient browsers require ancient code.
Feb 18 '14 #4

P: 17
I was going by this site
http://www.w3schools.com/cssref/sel_checked.asp
which indicated that only Opera was currently supported.

I'll investigate further...
Feb 18 '14 #5

P: 17
I tried the following script on imac using FF browser.

The :css is recognized and operates as advertised
as you indicated in your original post.

However, FMI, how would the status of the pseudo :checked
be used to check the status of the button being checked or not?
The following code uses only JS logic to determine the status.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5.  
  6. <title> HTML5 page </title>
  7. <style type="text/css">
  8.  input:checked + label{ font-weight: bold; color: white; background-color: red; }
  9. </style>
  10.  
  11. </head>
  12. <body>
  13. <form>
  14.   <input type="radio" id="m" name="gender" value="male">
  15.   <label for="m">male</label>
  16.   <input type="radio" id="f" name="gender" value="female">
  17.   <label for="f">female</label><p>
  18.  
  19.   <label for="b0"> <input type="radio" id="b0" name="rbtnStatus" value="0"> 0 </label>
  20.   <label for="b1"> <input type="radio" id="b1" name="rbtnStatus" value="1"> 1 </label>
  21.   <label for="b2"> <input type="radio" id="b2" name="rbtnStatus" value="2"> 2 </label>
  22.   <label for="b3"> <input type="radio" id="b3" name="rbtnStatus" value="3"> 3 </label>
  23.   <label for="b4"> <input type="radio" id="b4" name="rbtnStatus" value="4"> 4 </label>
  24.   <label for="b5"> <input type="radio" id="b5" name="rbtnStatus" value="5"> 5 </label><br>
  25.   <label for="b6"> <input type="radio" id="b6" name="rbtnStatus" value="6"> 6 </label>
  26.   <label for="b7"> <input type="radio" id="b7" name="rbtnStatus" value="7"> 7 </label>
  27.   <label for="b8"> <input type="radio" id="b8" name="rbtnStatus" value="8"> 8 </label>
  28.   <label for="b9"> <input type="radio" id="b9" name="rbtnStatus" value="9"> 9 </label>
  29.   <label for="b10"> <input type="radio" id="b10" name="rbtnStatus" value="10"> 10 </label>
  30.   <label for="b11"> <input type="radio" id="b11" name="rbtnStatus" value="11"> 11 </label><br>
  31.  
  32. </form>
  33. <button onclick="rbtnStatus('gender')">Gender Status</button>
  34. <button onclick="rbtnStatus('rbtnStatus')">Radio Status</button>
  35.  
  36. <script type="text/javascript">
  37. function rbtnStatus(elemName) {
  38.   var sel = document.getElementsByName(elemName);
  39.   var fnd = -1;
  40.   for (var i=0; i<sel.length; i++) { if (sel[i].checked) { fnd = i; } }
  41.   if (fnd == -1) { alert('No selection made'); }
  42.             else { alert('Selected: '+fnd+'\nValue: '+sel[fnd].value); }
  43. }
  44. </script>
  45.  
  46. </body>
  47. </html>
  48.  
Feb 18 '14 #6

Dormilich
Expert Mod 5K+
P: 8,639
I'll investigate further...
more reliable resources are
- caniuse.com
- Mozilla Developer Network

anyways, there are 2 main approaches Id use:
using :checked
Expand|Select|Wrap|Line Numbers
  1. var chk = document.querySelector("input[name='rbtnStatus']:checked");
  2. // since there can only be one radio button checked
  3. // there is no need to use querySelectorAll()
  4.  
  5. // test for success
  6. if (null === chk) {
  7.     throw new Error("No radio button selected.");
  8. }
  9.  
  10. // or, if you give the buttons a class
  11. var chk = document.querySelector(".rbtnStatus:checked");
  12.  
using getElementsByName()
Expand|Select|Wrap|Line Numbers
  1. // use [].filter.call(nodelist, fn) otherwise
  2. var chkArr  = [].filter(function(elem) {
  3.     return elem.checked;
  4. }, document.getElementsByName("rbtnStatus"));
  5.  
  6. // test for success
  7. if (0 === chkArr.length) {
  8.     throw new Error("No radio button selected.");
  9. }
  10.  
Feb 18 '14 #7

P: 17
@Dormilich,

Playing with your suggested code, I was successful with this...
Expand|Select|Wrap|Line Numbers
  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.     <meta charset="UTF-8" />
  5.  
  6.     <title> Radio Button Validation Methods </title>
  7.     <style type="text/css">
  8.      input:checked + label{ font-weight: bold; color: white; background-color: red; }
  9.      label + input:checked { font-weight: bold; color:red; }
  10.      label + .pptClass { font-weight: bold; color:magenta; }
  11.     </style>
  12.  
  13.     </head>
  14.     <body>
  15.     <form onsubmit="return false">
  16.       <input type="radio" id="m" name="gender" value="male">   <label for="m">male</label>
  17.       <input type="radio" id="f" name="gender" value="female"> <label for="f">female</label><p>
  18.  
  19.       <label for="b0"> <input type="radio" id="b0" name="rbtnStatus" value="0"> 0 </label>
  20.       <label for="b1"> <input type="radio" id="b1" name="rbtnStatus" value="1"> 1 </label>
  21.       <label for="b2"> <input type="radio" id="b2" name="rbtnStatus" value="2"> 2 </label>
  22.       <label for="b3"> <input type="radio" id="b3" name="rbtnStatus" value="3"> 3 </label>
  23.       <label for="b4"> <input type="radio" id="b4" name="rbtnStatus" value="4"> 4 </label>
  24.       <label for="b5"> <input type="radio" id="b5" name="rbtnStatus" value="5"> 5 </label><br>
  25.       <label for="b6"> <input type="radio" id="b6" name="rbtnStatus" value="6"> 6 </label>
  26.       <label for="b7"> <input type="radio" id="b7" name="rbtnStatus" value="7"> 7 </label>
  27.       <label for="b8"> <input type="radio" id="b8" name="rbtnStatus" value="8"> 8 </label>
  28.       <label for="b9"> <input type="radio" id="b9" name="rbtnStatus" value="9"> 9 </label>
  29.       <label for="b10"> <input type="radio" id="b10" name="rbtnStatus" value="10"> 10 </label>
  30.       <label for="b11"> <input type="radio" id="b11" name="rbtnStatus" value="11"> 11 </label><p>
  31.  
  32.       <label for="ppt0"> <input type="radio" id="ppt0" name="pptStatus" class="pptClass" value="person"> Person </label>
  33.       <label for="ppt1"> <input type="radio" id="ppt1" name="pptStatus" class="pptClass" value="place"> Place </label>
  34.       <label for="ppt2"> <input type="radio" id="ppt2" name="pptStatus" class="pptClass" value="thing"> Thing </label><p>
  35.  
  36.     </form>
  37.     <button onclick="rbtnStatus('gender')">Gender Status</button>
  38.     <button onclick="rbtnStatus2('rbtnStatus')">Radio Status</button>
  39.     <button onclick="rbtnStatus3('pptClass')">PPT Status</button><p>
  40.  
  41.     <script type="text/javascript">
  42.     function rbtnStatus(elemName) {  // solution 1
  43.       var sel = document.getElementsByName(elemName);
  44.       var fnd = -1;
  45.       for (var i=0; i<sel.length; i++) { if (sel[i].checked) { fnd = i; } }
  46.       if (fnd == -1) { alert('No selection made'); }
  47.                 else { alert('Selected: '+fnd+'\nValue: '+sel[fnd].value); }
  48.     }
  49.  
  50.     function rbtnStatus2(elemName) {
  51.       var chk = document.querySelector("input[name="+elemName+"]:checked");
  52.     // since there can only be one radio button checked, there is no need to use querySelectorAll()
  53.  
  54.     // test for success
  55.       if (null === chk) { alert('No button picked'); } // throw new Error("No radio button selected."); }
  56.                    else { alert(chk.value); }
  57.     } 
  58.  
  59.  
  60.     function rbtnStatus3(elemClass) { // or, if you give the buttons a class
  61.       elemClass = '.'+elemClass;
  62.       var chk = document.querySelector(elemClass+":checked");
  63.     // test for success
  64.       if (null === chk) { alert('No button picked'); } // throw new Error("No radio button selected."); }
  65.                    else { alert(chk.value); }
  66.     }
  67.  
  68.     </script>
  69.  
  70.     </body>
  71.     </html>
  72.  
  73.  
Thanks for the enlightenment.
:)
Feb 19 '14 #8

Dormilich
Expert Mod 5K+
P: 8,639
function rbtnStatus() is quite ineffective. you can break/return at the first found occurrence, since there will be no more checked radio button.
Feb 19 '14 #9

Post your reply

Sign in to post your reply or Sign up for a free account.