Array of Radio buttons, detect the one selected

**Dormilich** · Feb 4 '14, 08:15 PM

with CSS3’s :checked selector.

**jmrker** · Feb 18 '14, 01:45 AM

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

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> Radio Button Picks </title>

</head>
<body>
<div id="rBtns">
Pick: <br>
<input type="radio" name="rBtns" value="0"> 0
<input type="radio" name="rBtns" value="1"> 1
<input type="radio" name="rBtns" value="2"> 2
<input type="radio" name="rBtns" value="3"> 3
<input type="radio" name="rBtns" value="4"> 4
<input type="radio" name="rBtns" value="5"> 5
<input type="radio" name="rBtns" value="6"> 6<br>
<input type="radio" name="rBtns" value="7"> 7
<input type="radio" name="rBtns" value="8"> 8
<input type="radio" name="rBtns" value="9"> 9
<input type="radio" name="rBtns" value="10"> 10
<input type="radio" name="rBtns" value="11"> 11
<input type="radio" name="rBtns" value="12"> 12
</div>

<script type="text/javascript">
// For: http://bytes.com/topic/javascript/answers/954639-array-radio-buttons-detect-one-selected

function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { str = sel[i].value;  fnd = i; }
  }
//  return fnd;   // return option index of selection
// comment out next line if option index used in line above  
  return str;
} 
window.onload = function() {
  var obj = document.getElementById('rBtns').getElementsByTagName('input');
  for (var i=0; i<obj.length; i++) { obj[i].onclick=function() { alert(this.value); } }
}
</script>

</body>
</html>

Or alternatively,

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Radio Button Picks </title>
</head>
<body>

Pick: <br>
<input type="radio" name="rBtns" value="0"> 0
<input type="radio" name="rBtns" value="1"> 1
<input type="radio" name="rBtns" value="2"> 2
<input type="radio" name="rBtns" value="3"> 3
<input type="radio" name="rBtns" value="4"> 4
<input type="radio" name="rBtns" value="5"> 5
<input type="radio" name="rBtns" value="6"> 6<br>
<input type="radio" name="rBtns" value="7"> 7
<input type="radio" name="rBtns" value="8"> 8
<input type="radio" name="rBtns" value="9"> 9
<input type="radio" name="rBtns" value="10"> 10
<input type="radio" name="rBtns" value="11"> 11
<input type="radio" name="rBtns" value="12"> 12<br>

<script type="text/javascript">
// For: http://bytes.com/topic/javascript/answers/954639-array-radio-buttons-detect-one-selected

function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked) { str = sel[i].value;  fnd = i; }
  }
//  return fnd;   // return option index of selection
// comment out next line if option index used in line above  
  return str;
} 
window.onload = function() {
  var obj = document.getElementsByName('rBtns');
  for (var i=0; i<obj.length; i++) { obj[i].onclick=function() { alert(this.value); } }
}
</script>

</body>
</html>

**Dormilich** · Feb 18 '14, 06:33 AM

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.

**jmrker** · Feb 18 '14, 03:34 PM

I was going by this site

W3Schools.com

http://www.w3schools.com/cssref/sel_checked.asp

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

which indicated that only Opera was currently supported.

I'll investigate further...

**jmrker** · Feb 18 '14, 04:06 PM

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.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> HTML5 page </title>
<style type="text/css">
 input:checked + label{ font-weight: bold; color: white; background-color: red; }
</style>

</head>
<body>
<form>
  <input type="radio" id="m" name="gender" value="male">
  <label for="m">male</label>
  <input type="radio" id="f" name="gender" value="female">
  <label for="f">female</label><p>

  <label for="b0"> <input type="radio" id="b0" name="rbtnStatus" value="0"> 0 </label>
  <label for="b1"> <input type="radio" id="b1" name="rbtnStatus" value="1"> 1 </label>
  <label for="b2"> <input type="radio" id="b2" name="rbtnStatus" value="2"> 2 </label>
  <label for="b3"> <input type="radio" id="b3" name="rbtnStatus" value="3"> 3 </label>
  <label for="b4"> <input type="radio" id="b4" name="rbtnStatus" value="4"> 4 </label>
  <label for="b5"> <input type="radio" id="b5" name="rbtnStatus" value="5"> 5 </label><br>
  <label for="b6"> <input type="radio" id="b6" name="rbtnStatus" value="6"> 6 </label>
  <label for="b7"> <input type="radio" id="b7" name="rbtnStatus" value="7"> 7 </label>
  <label for="b8"> <input type="radio" id="b8" name="rbtnStatus" value="8"> 8 </label>
  <label for="b9"> <input type="radio" id="b9" name="rbtnStatus" value="9"> 9 </label>
  <label for="b10"> <input type="radio" id="b10" name="rbtnStatus" value="10"> 10 </label>
  <label for="b11"> <input type="radio" id="b11" name="rbtnStatus" value="11"> 11 </label><br>
  
</form>
<button onclick="rbtnStatus('gender')">Gender Status</button>
<button onclick="rbtnStatus('rbtnStatus')">Radio Status</button>

<script type="text/javascript">
function rbtnStatus(elemName) {
  var sel = document.getElementsByName(elemName);
  var fnd = -1;
  for (var i=0; i<sel.length; i++) { if (sel[i].checked) { fnd = i; } }
  if (fnd == -1) { alert('No selection made'); }
            else { alert('Selected: '+fnd+'\nValue: '+sel[fnd].value); }
}
</script>

</body>
</html>

**Dormilich** · Feb 18 '14, 04:52 PM

I'll investigate further...

more reliable resources are
- caniuse.com
- Mozilla Developer Network

anyways, there are 2 main approaches I’d use:
using :checked

Code:

var chk = document.querySelector("input[name='rbtnStatus']:checked");
// since there can only be one radio button checked
// there is no need to use querySelectorAll()

// test for success
if (null === chk) {
    throw new Error("No radio button selected.");
}

// or, if you give the buttons a class
var chk = document.querySelector(".rbtnStatus:checked");

using getElementsByNa me()

Code:

// use [].filter.call(nodelist, fn) otherwise
var chkArr  = [].filter(function(elem) {
    return elem.checked;
}, document.getElementsByName("rbtnStatus"));

// test for success
if (0 === chkArr.length) {
    throw new Error("No radio button selected.");
}

**jmrker** · Feb 19 '14, 04:27 PM

@Dormilich,

Playing with your suggested code, I was successful with this...

Code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
     
    <title> Radio Button Validation Methods </title>
    <style type="text/css">
     input:checked + label{ font-weight: bold; color: white; background-color: red; }
     label + input:checked { font-weight: bold; color:red; }
     label + .pptClass { font-weight: bold; color:magenta; }
    </style>
     
    </head>
    <body>
    <form onsubmit="return false">
      <input type="radio" id="m" name="gender" value="male">   <label for="m">male</label>
      <input type="radio" id="f" name="gender" value="female"> <label for="f">female</label><p>
     
      <label for="b0"> <input type="radio" id="b0" name="rbtnStatus" value="0"> 0 </label>
      <label for="b1"> <input type="radio" id="b1" name="rbtnStatus" value="1"> 1 </label>
      <label for="b2"> <input type="radio" id="b2" name="rbtnStatus" value="2"> 2 </label>
      <label for="b3"> <input type="radio" id="b3" name="rbtnStatus" value="3"> 3 </label>
      <label for="b4"> <input type="radio" id="b4" name="rbtnStatus" value="4"> 4 </label>
      <label for="b5"> <input type="radio" id="b5" name="rbtnStatus" value="5"> 5 </label><br>
      <label for="b6"> <input type="radio" id="b6" name="rbtnStatus" value="6"> 6 </label>
      <label for="b7"> <input type="radio" id="b7" name="rbtnStatus" value="7"> 7 </label>
      <label for="b8"> <input type="radio" id="b8" name="rbtnStatus" value="8"> 8 </label>
      <label for="b9"> <input type="radio" id="b9" name="rbtnStatus" value="9"> 9 </label>
      <label for="b10"> <input type="radio" id="b10" name="rbtnStatus" value="10"> 10 </label>
      <label for="b11"> <input type="radio" id="b11" name="rbtnStatus" value="11"> 11 </label><p>
     
      <label for="ppt0"> <input type="radio" id="ppt0" name="pptStatus" class="pptClass" value="person"> Person </label>
      <label for="ppt1"> <input type="radio" id="ppt1" name="pptStatus" class="pptClass" value="place"> Place </label>
      <label for="ppt2"> <input type="radio" id="ppt2" name="pptStatus" class="pptClass" value="thing"> Thing </label><p>

    </form>
    <button onclick="rbtnStatus('gender')">Gender Status</button>
    <button onclick="rbtnStatus2('rbtnStatus')">Radio Status</button>
    <button onclick="rbtnStatus3('pptClass')">PPT Status</button><p>
     
    <script type="text/javascript">
    function rbtnStatus(elemName) {  // solution 1
      var sel = document.getElementsByName(elemName);
      var fnd = -1;
      for (var i=0; i<sel.length; i++) { if (sel[i].checked) { fnd = i; } }
      if (fnd == -1) { alert('No selection made'); }
                else { alert('Selected: '+fnd+'\nValue: '+sel[fnd].value); }
    }

    function rbtnStatus2(elemName) {
      var chk = document.querySelector("input[name="+elemName+"]:checked");
    // since there can only be one radio button checked, there is no need to use querySelectorAll()
     
    // test for success
      if (null === chk) { alert('No button picked'); } // throw new Error("No radio button selected."); }
                   else { alert(chk.value); }
    } 
 

    function rbtnStatus3(elemClass) { // or, if you give the buttons a class
      elemClass = '.'+elemClass;
      var chk = document.querySelector(elemClass+":checked");
    // test for success
      if (null === chk) { alert('No button picked'); } // throw new Error("No radio button selected."); }
                   else { alert(chk.value); }
    }
    
    </script>
     
    </body>
    </html>

Thanks for the enlightenment.
:)

**Dormilich** · Feb 19 '14, 05:57 PM

function rbtnStatus() is quite ineffective. you can break/return at the first found occurrence, since there will be no more checked radio button.

Array of Radio buttons, detect the one selected

Array of Radio buttons, detect the one selected

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment