JQuery Requerir casilla de verificación y botón de radio antes de enviar

Question

Estoy teniendo un gran problema tratando de resolver esto. He estado buscando ejemplos y herramientas para la validación de JQuery durante más de 3 horas.

Todo lo que quiero hacer es requerir que se seleccione una casilla de verificación y un botón de opción, pero no me importa cuál es necesario.

<form id="form1" action="/controller/action" method="post"> 
    <div class="checkbox"><input type="checkbox" name="box1" class="cBox" /><label for="box1" class="label">Box1</label></div> 
    <div class="checkbox"><input type="checkbox" name="Box2" class="cBox" /><label for="Box2" class="label">Box2</label></div> 
    <div class="checkbox"><input type="checkbox" name="Box3" class="cBox" /><label for="Box3" class="label">Box3</label></div> 
    <div class="radio"><input type="radio" name="print" value="Radio1" class="rad" /><label class="label">Radio1</label></div> 
    <div class="radio"><input type="radio" name="print" value="Radio2" class="rad" /><label class="label">Radio2</label></div> 
    <div class="radio"><input type="radio" name="print" value="Radio3" class="rad" /><label class="label">Radio3</label></div> 
    <input type="submit" value="Submit" /> 
</form> 

Cualquier ayuda sería muy apreciada.

Answer 1

Para ello, debe utilizar el selector :checked. Aunque la respuesta de JP está bien, probablemente haría esto:

$('#form1').submit(function() { 
    if ($('input:checkbox', this).is(':checked') && 
     $('input:radio', this).is(':checked')) { 
     // everything's fine... 
    } else { 
     alert('Please select something!'); 
     return false; 
    } 
}); 

par de notas:

• creo que lee mejor utilizar la función is, que devuelve un valor lógico del selector.
• Puede usar :radio y :checkbox como un acceso directo para seleccionar todas las radios y casillas de verificación en un formulario. Sin embargo, according to the jQuery manual, es una mala práctica usar estos selectores sin especificar input antes de ellos, ya que evalúan a *:checkbox y *:radio de lo contrario, que son selectores muy lentos.
• Al pasar this como segundo argumento que son specifying a context para la búsqueda, y por lo tanto sólo se busca: casillas de verificación y entradas de radio dentro de la forma actual. Sin ella, podríamos obtener falsos positivos si resulta que hay otro formulario en la página.

Answer 2

$('#form1').submit(function(){ 
    if ($(':checkbox:checked', this)[0] && $(':radio:checked', this)[0]) { 
     // everything's fine... 
    } else { 
     alert('Please select something!'); 
     return false; 
    } 
}); 

Answer 3

Esto funcionó para mí en mi caso en el que deseo que los usuarios marquen una casilla de verificación para enviar un formulario.

$(document).ready(function(){ 
     $('#yourinput').required = true; 
});