En este tutorial vamos a aprender como validar Checkboxes, Radiobuttons y Selects(menus desplegables) del lado del cliente usando JavaScript + jQuery.

HTML

Para el ejemplo usaremos un formulario que tenga los 3 elementos, después del formulario incluimos a jQuery y por ultimo abrimos un script y registramos el evento en que el formulario sea enviado(submit):

<form action="" class="validar_form" method="post">
	<h2>Checkbox</h2>
	<div><input type="checkbox" name="chck[]" value="opt 1 chckd" /><label>Opt 1</label></div>
	<div><input type="checkbox" name="chck[]" value="opt 2 chckd" /><label>Opt 2</label></div>
	<div><input type="checkbox" name="chck[]" value="opt 3 chckd" /><label>Opt 3</label></div>
	<div class="errors error1"></div>
	<h2>Radio</h2>
	<div><input type="radio" name="gruporad" value="rad 1 chckd" /><label>Radio 1</label></div>
	<div><input type="radio" name="gruporad" value="rad 2 chckd" /><label>Radio 2</label></div>
	<div><input type="radio" name="gruporad" value="rad 3 chckd" /><label>Radio 3</label></div>
	<div class="errors error2"></div>
	<h2>Select</h2>
	<div>
		<select name="select">
			<option value="" selected>------</option>
			<option value="select 1 chckd">Opcion 1</option>
			<option value="select 1 chckd">Opcion 2</option>
			<option value="select 1 chckd">Opcion 3</option>
		</select>
	<div class="errors error3"></div>
	</div>
	<button class="enviar">Enviar</button>
	</form>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(".validar_form").submit( function(){
		     // Aqui ira nuestro codigo
		});
	</script>

Fijaos que después de cada grupo de elementos estoy poniendo un div.errors vacío, allí es donde iran los mensajes de error de validación.

JavaScript

Crearemos 3 variables que contendrán los valores de los checkbox, radiobuttons y selects respectivamente, fijaos que en los 3 estamos seleccionando el elemento en un estado especifico(:checked, :checked y :selected) esto es para que solo obtenga el valor si estos están marcados/seleccionados, en caso contrario el valor de la variable seria 0:

		$(".validar_form").submit( function(){
			var check = $("input[type='checkbox']:checked").length;
			var radio = $("input[type='radio']:checked").length;
			var select = $("select option:selected").val();

		});

En el caso de checkbox y de radiobuttons se usa .length para determinar el numero de caracteres que existen en la variable, ósea si en el checkbox seleccionan 2 opciones el length vendría a ser 2.

Validación

Ahora validaremos el formulario usando unas cuantas condiciones, primero si la variable check esta vacía mostramos .error1 y hacemos return false; para que el form no se envie, hacemos lo mismo con los radio y con el select, en caso que el usuario rellene el formulario correctamente ocultamos los errores y lanzamos un alert(“Ok”) seguido de un return true; que enviara el formulario:

				if(check == ""){
					$('.error1').text("Seleccione al menos un checkbox");
					return false;
				} else if(radio == ""){
					$('.error2').text("Seleccione un radio button");
					return false;
				} else if(select == ""){
					$('.error3').text("Seleccione una opcion");
					return false;
				} else {
					$('.errors').hide();
					alert('Ok!');
					return true;
				}

Código Completo

	$(".validar_form").submit( function(){
			var check = $("input[type='checkbox']:checked").length;
			var radio = $("input[type='radio']:checked").length;
			var select = $("select option:selected").val();

				if(check == ""){
					$('.error1').text("Seleccione al menos un checkbox");
					return false;
				} else if(radio == ""){
					$('.error2') qui.text("Seleccione un radio button");
					return false;
				} else if(select == ""){
					$('.error3').text("Seleccione una opcion");
					return false;
				} else {
					$('.errors').hide();
					alert('Ok!');
					return true;
				}	
		});

Ver Demostración.