JQuery Wymagaj pola wyboru i przycisku radiowego przed wysłaniem

Question

Mam jeden ciężko pracować, próbując to zrozumieć. Przeglądając przykłady i narzędzia do sprawdzania poprawności JQuery przez ponad 3 godziny.

Wszystko, co chcę zrobić, to zaznaczenie pola wyboru i przycisku opcji, ale nie obchodzi mnie, który z nich jest wymagany.

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

Każda pomoc zostanie bardzo doceniona.

Answer 1

W tym celu należy użyć selektora :checked. Chociaż odpowiedź JP jest w porządku, pewnie to zrobić:

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

Kilka notatek:

• myślę, że brzmi lepiej użyć funkcji is, która zwraca wartość logiczną selektora.
• Można użyć :radio i :checkbox jako skrótu do wybierania wszystkich radiów i pól wyboru w formularzu. Jednakże, according to the jQuery manual, niewłaściwą praktyką jest używanie tych selektorów bez określania przed nimi input, ponieważ oceniają one na *:checkbox i *:radio w przeciwnym razie, które są bardzo powolnymi selektorami.
• Przekazując this jako drugi argument, jesteśmy do wyszukiwania pod kątem specifying a context, a zatem szukamy tylko pól wyboru i wejść radiowych w bieżącym formularzu. Bez tego możemy uzyskać fałszywe alarmy, jeśli na stronie pojawi się inny formularz.

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

To działało dla mnie w moim przypadku, gdy chcę, aby użytkownicy musieli zaznaczyć pole wyboru, aby przesłać formularz.

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