JQuery richiede la casella di controllo e il pulsante di opzione prima di inviare

Question

Sto avendo un momento difficile cercando di capirlo. Ho esaminato esempi e strumenti per la convalida di JQuery per oltre 3 ore.

Tutto ciò che voglio fare è richiedere che sia selezionata una casella di controllo e un pulsante di opzione, ma non mi interessa quale sia la richiesta.

<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> 

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Per fare questo è necessario utilizzare il selettore :checked. Anche se la risposta di JP va bene, probabilmente sarei fare questo:

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

paio di note:

• penso si legge meglio usare la funzione is, che restituisce un valore booleano del selettore.
• È possibile utilizzare :radio e :checkbox come collegamento per selezionare tutte le radio e le caselle di controllo in un modulo. Tuttavia, according to the jQuery manual, è una cattiva pratica utilizzare questi selettori senza specificare input prima di loro, poiché valutano a *:checkbox e *:radio in caso contrario, che sono selettori molto lenti.
• Passando a this come secondo argomento siamo specifying a context per la ricerca, quindi stiamo solo cercando le checkbox e gli ingressi radio all'interno del modulo corrente. Senza di esso potremmo ottenere falsi positivi se ci dovesse essere un altro modulo nella pagina.

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

Questo ha funzionato per me nel mio caso in cui voglio richiedere agli utenti di selezionare una casella di controllo per inviare un modulo.

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