In this tutorial you can learn how to check and validate radio, and checkbox buttons in JavaScript.
To verify if a radio, or checkbox button is checked, use the checked property.
If the button is checked, the JavaScript checked property returns true, otherwise returns false.

To check /validate checkbox button it's easy because each checkbox input must have an unique name.
Syntax:
if(form_name.checkbox_name.checked == false){
 alert('Checkbox button not checked');
}

It becomes a bit more complicated when it must check radio buttons, because multiple radio buttons has the same name, and JavaScript stores them into an array. So, the syntax:
form_name.radio_name
- Returns an array with all the radio buttons with name='radio_name' in the 'form_name'.
To validate the radio buttons, you must traverse that array, and check each element (each button), like in the code bellow.
var radio_buttons = form_name.radio_name;
var re = false;

// traverse the array with radio buttons, if one is checked, make 're' true and stops
for(var i=0; i<radio_buttons.length; i++){
 if(radio_buttons[i] == true){
 re = true;
 }
}

// if 're' false, means no one radio button checked
if(re == false) alert('Radio button not checked');

Example validating radio and checkbox buttons

Below it's a practical example with a form that contains two radio buttons and three checkboxes. The user must check an radio button (vegetables), and at least one checkbox (fruits), otherwise, when it submits the form, the function checkButons() alerts an error message, and returns False.
<h4>Check a vegetable, and at least one fruit</h4>
<p>- If you try to submit the form without checking the checkbox and radio button, the form is not submitted.</p>
<form action='#' method='post' name='f1' onsubmit='return checkButons(this);'>
Vegetables: <input type='radio' name='vegetable' value='cabbage' />Cabbage
 <input type='radio' name='vegetable' value='carrot' />Carrot<br>
Fruits:<br>
 <input type='checkbox' name='fruit1' value='apple' />Apple<br>
 <input type='checkbox' name='fruit2' value='pear' />Pear<br>
 <input type='checkbox' name='fruit3' value='banana' />Banana<br>
 <input type='submit' value='Submit' />
</form>

<script>
// checks buttons (radio, checkbox) - coursesweb.net
function checkButons(frm) {
 var re = false; // used to determine when a button is checked
 var err = ''; // to store the errors

 var vegetables = frm.vegetable; // contains an array with all radio buttons 'vegetable'

 // create an Array in JSonn format with checkbox buttons
 var fruits = [frm.fruit1, frm.fruit2, frm.fruit3];

 // traverse the radio buttons
 // if one is checked sets re to true, and stops the iteration with 'break'
 for(var i=0; i<vegetables.length; i++) {
 if(vegetables[i].checked == true) {
 re = true;
 break;
 }
 }

 // if 're' is false means no radio button checked, add error in 'err' 
 if(re == false) err += '- You must check at least one vegetable';

 // make 're' again False, and traverse the checkbox buttons
 // if one is checked sets re to true, and stops the iteration with 'break'
 re = false
 for(var i=0; i<fruits.length; i++) {
 if(fruits[i].checked == true) {
 re = true;
 break;
 }
 }

 // if 're' is false means no checkbox button checked, add error in 'err' 
 if (re == false) err += '\n - You must check at least one fruit';

 // if 'err' not empty, alert the error(s) and returns False to stop submitting form
 if(err != '') {
 alert(err);
 return false;
 }
 else return re;
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Validate radio and checkbox buttons

Last accessed pages

  1. Make HTML elements the same height (810)
  2. Read Excel file data in PHP - PhpExcelReader (68120)
  3. Simple Admin Login PHP Script (3110)
  4. Insert, Select and Update NULL value in MySQL (41035)
  5. $_GET, $_POST and $_REQUEST Variables (27414)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1434)
  2. Tabs effect with CSS (1369)
  3. Contact page - CoursesWeb (1366)
  4. Insert, Select and Update NULL value in MySQL (792)
  5. PHP getElementById and getElementsByTagName (622)