CODEWITHSUNDEEP
javascript
cybertextron
cybertextron

Reputation: 10961

checking if at least one radio button has been selected - JavaScript

Supposed I had the following HTML form:

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Choose</title>
</head>

<body>
  <form method="post" enctype="application/x-www-form-urlencoded">
    <h1>Choose</h1>

    <p><input type="radio" name="choose" value="psychology"><font size="5" color="#0033CC">Instant Psychology</font><br>
    <br>
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
    <br>
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
    <br>
    <input type="submit" name="Submit" value="Go"></p>
  </form>


</body><link rel="stylesheet" type="text/css" href="data:text/css,"></html>

How can I write a JavaScript function to make sure at least one radio input has been selected?

Upvotes: 20

Views: 82410

Answers (6)

Abu Shoeb
Abu Shoeb

Reputation: 5153

The question is asked for a JS solution. However, here's a very simple trick to get this done using HTML. You can simply use the required keyword in the HTML input tag.

Sample code

<input type="radio" name="gender" value="male" required>Male<br>
<input type="radio" name="gender" value="female">Female

Your form

Please note that you only need to mention the required keyword once for the entire radio-group.

<form method="post" enctype="application/x-www-form-urlencoded">
    <h1>Choose</h1>

    <p><input type="radio" name="choose" value="psychology" required><font size="5" color="#0033CC">Instant Psychology</font><br>
    <br>
    <input type="radio" name="choose" value="geography"><font size="5" color="#CC0000">Instant Geography</font><br>
    <br>
    <input type="radio" name="choose" value="gastronomy"><font size="5" color="#660033">Instant Gastronomy</font><br>
    <br>
    <input type="submit" name="Submit" value="Go"></p>
  </form>

Upvotes: 0

J. Jesper
J. Jesper

Reputation: 137

I solved it this way.

if(document.querySelector('input[name="choice"]:checked') == null) {
    window.alert("You need to choose an option!");
}

Upvotes: 10

Rick Smith
Rick Smith

Reputation: 9251

This is possible to do without javascript if your targeted browsers support the HTML5 required attribute. 

<input type="radio" name="choose" value="psychology" required>
<input type="radio" name="choose" value="geography" required>
<input type="radio" name="choose" value="gastronomy" required>

Note that in chrome you only need to put required on one of the inputs. I am not sure what other browsers do.

I usually do this in addition to a javascript validation (like the selected answers) so that html 4 browsers are supported as well.

Upvotes: 14

Kevin Boucher
Kevin Boucher

Reputation: 16675

Since you said you needed to know if 'at least one input is selected', you probably want checkboxes rather than radio buttons. (You can only select one radio button at a time from a group of radio buttons that share a name value.)

You should probably drop the font tags and update your HTML a little bit too:

HTML

<h1>Choose</h1>
<div>
    <input type="checkbox" id="ckb-psychology" name="choose" value="psychology">
    <label for="ckb-psychology" class="blue">Instant Psychology</label>
</div>
<div>
    <input type="checkbox" id="ckb-geography" name="choose" value="geography">
    <label for="ckb-geography" class="red">Instant Geography</label>
</div>
<div>
    <input type="checkbox" id="ckb-gastronomy" name="choose" value="gastronomy">
    <label for="ckb-gastronomy" class="purple">Instant Gastronomy</label>
</div>
<input type="submit" name="Submit" value="Go">

CSS

label { font-size: 1.5em; }

.blue { color: #0033CC; }
.red { color: #CC0000; }
.purple { color: #660033; }

JavaScript

function isOneChecked ( name ) {

    var checkboxes = document.getElementsByName( name ),
        i = checkboxes.length - 1;

    for ( ; i > -1 ; i-- ) {

        if ( checkboxes[i].checked ) { return true; }

    }

    return false;
}

Upvotes: 2

Michael Berkowski
Michael Berkowski

Reputation: 270609

Looping over the <input> tags, check the type and if it is checked.

function isOneChecked() {
  // All <input> tags...
  var chx = document.getElementsByTagName('input');
  for (var i=0; i<chx.length; i++) {
    // If you have more than one radio group, also check the name attribute
    // for the one you want as in && chx[i].name == 'choose'
    // Return true from the function on first match of a checked item
    if (chx[i].type == 'radio' && chx[i].checked) {
      return true;
    } 
  }
  // End of the loop, return false
  return false;
}

Here it is in action on jsfiddle

Upvotes: 9

pedrochaves
pedrochaves

Reputation: 782

Something like this should do the trick

if ($("input[type=radio]:checked").length > 0) {
    // Do your stuff here
}

UPDATE Did not see that it's not supposed to have jQuery, so here's an alternative function to check that in pure JS

 function check(){
     var radios = document.getElementsByName("choice");

     for (var i = 0, len = radios.length; i < len; i++) {
          if (radios[i].checked) {
              return true;
          }
     }

     return false;
 }

Upvotes: 45

Related Questions