Checkbox: It is an element in HTML which can be checked or unchecked. It is grouped on the basis of name.

In this tutorial we will learn about validation of checkbox in javascript and retrieve its value in PHP. Checkbox is classified in two types.

• Multiple checkbox
• Single checkbox

1. Multiple checkbox: You can select more than one checkbox, but atleast one checkbox must be selected. In PHP, you have to retrieve its value.

Form with multiple checkbox

<form name="frm" method="POST">
	Books:
	<input type="checkbox" name="chkBooks[]" id="electronics" value="Electronics"><label for="electronics">Electronics</label>
	<input type="checkbox" name="chkBooks[]" id="radar" value="radar"><label for="radar">Radar</label>
	<input type="checkbox" name="chkBooks[]" id="maths" value="maths"><label for="maths">Maths</label>
	<input type="checkbox" name="chkBooks[]" id="physics" value="physics"><label for="physics">Physics</label>
	<input type="checkbox" name="chkBooks[]" id="signal" value="signal"><label for="signal">Signal system</label>
	<input type="checkbox" name="chkBooks[]" id="telephony" value="telephony"><label for="telephony">Telephony</label>
	
	<input type="submit" name="submit" value="submit" onclick="return validChk()" />
</form>

Javascript validation for multiple checkbox

<script>
	function validChk() {
		var chkBox = document.getElementsByName('chkBooks[]');
		var lenChkBox = chkBox.length;
		//alert(lenChkBox)
		var valid=0;
		for(var i=0;i<lenChkBox;i++) {
			if(chkBox[i].checked==true) {
				valid=1;
				break;
			}
		}
		if(valid==0) {
			msg='Please select atleast one book';
			alert(msg);
			return false;
		}
		return true;
	}
</script>

In PHP you will get all checked values

<?php
if(isset($_POST['submit'])) {	//If form gets submitted
	print_r($_POST['chkBooks']);
}
?>

2. Single checkbox: Sometimes you have single checkbox and you have to validate it and retrieve its value in PHP. e.g. You have to agree to terms and condition

<form name="frmTerms" method="POST">
	<input type="checkbox" name="terms" id="terms" value="1"><label for="terms">Agree to terms and condition</label>
	<input type="submit" name="submit" value="submit" onclick="return validChk()" />
</form>

Javascript validation for single checkbox

<script>
	function validChk() {
		var chkVal = document.frmTerms.chkTerms.checked;
		if(chkVal==false) {
			msg='Please agree to terms and condition';
			alert(msg);
			return false;
		}
		return true;
	}
</script>

In PHP you get checked values

<?php
if(isset($_POST['submit1'])) {	//If form gets submitted
	print_r($_POST['chkTerms']);
}
?>