JQuery Require Checkbox и Radio Button перед отправкой - PullRequest
Новая
       11

JQuery Require Checkbox и Radio Button перед отправкой

11 голосов
/ 11 мая 2009

Я испытываю трудности с попыткой выяснить это. Более 3 часов изучал примеры и инструменты для проверки JQuery.

Все, что я хочу сделать, - это установить флажок и переключатель, но мне все равно, какой из них требуется. 

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

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

21 голосов
/ 11 мая 2009

Для этого вы должны использовать селектор :checked. Хотя ответ JP хорош, я бы, наверное, сделал это: 

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

Пара заметок:

  • Я думаю, что лучше читать функцию is, которая возвращает логическое значение селектора.
  • Вы можете использовать :radio и :checkbox в качестве ярлыка для выбора всех радиомодулей и флажков в форме. Однако, согласно руководству jQuery , это плохая практика - использовать эти селекторы без указания input перед ними, поскольку они оцениваются как *:checkbox и *:radio в противном случае, которые являются очень медленными селекторами. 1026 *
  • Передав this в качестве второго аргумента, мы указываем контекст для поиска и, таким образом, ищем только флажки и радиовходы внутри текущей формы. Без этого мы можем получить ложные срабатывания, если на странице окажется другая форма.
1 голос
/ 11 мая 2009 
$('#form1').submit(function(){
    if ($(':checkbox:checked', this)[0] && $(':radio:checked', this)[0]) {
        // everything's fine...
    } else {
        alert('Please select something!');
        return false;
    }
});
0 голосов
/ 31 января 2016

Это сработало для меня в моем случае, когда я хочу, чтобы пользователи отмечали флажок для отправки формы. 

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