Проверьте, не установлен ли ни один из флажков в jquery

Question

У меня есть два флажка, и один из флажков должен быть отмечен. Я вижу, что это правильно, нет синтаксических ошибок. Что нужно сделать с моим кодом, чтобы проверить, не были ли установлены какие-либо флажки?

HTML:

<input type="checkbox" value="aa" class="first" name="a"> Yes<br/>
<input type="checkbox" value="bb" class="second" name="b"> No <br/>
<button type="submit">Go!</button>
<p class="error"></p>

JavaScript:

$('button').on('click',function(){
    if( $(".first:not(:checked)") && $(".second:not(:checked)") ){
        $('.error').text('You must select atleast one!');
    }else
        $('.error').hide();
});

Пример: http://jsfiddle.net/ptbTq/

Answer 1

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

<div id="cb">
   <input type="checkbox" value="aa" class="first" name="a" /> Yes<br/>
   <input type="checkbox" value="bb" class="second" name="b" /> No <br/>
   <button type="submit">Go!</button>
   <p class="error"></p>
</div>

Ваш JQuery:

$('button').click(function() {
    var checked_one = $('div#cb input[type="checkbox"]').is(':checked');

    if (!checked_one )
        $('.error').text('You must select atleast one!');
    else
        $('.error').hide();
});

Демонстрацию в реальном времени можно посмотреть здесь: http://jsfiddle.net/ptbTq/15/

Answer 2

Short:

$("input[type=checkbox]").is(":checked")

возвращает true, если:

один из ваших флажков - из селектора ("input[type=checkbox]") - отмечен.

еще возврат false

а в вашем случае:

$(".first, .second").is(":checked")

Сделайте что-нибудь, хотя бы один из ваших флажков отмечен

Answer 3

Проверьте эту скрипку: http://jsfiddle.net/692Dx/

Контрольный код:

if($('input[type="checkbox"]:checked').length == 0) {
    alert('none checked');   
}

Answer 4

Вы используете селекторы, которые не возвращают логические значения, что вам нужно при написании условия if.Вот что вы можете сделать:

$('button').on('click',function() {
    if(!$(".first").is(":checked") && !$(".second").is(":checked")) {
        $('.error').text('You must select atleast one!').show();
    } else {
        $('.error').hide();
    }
});

или, если вы предпочитаете и считаете, что это может быть более читабельным, вы можете инвертировать условие:

$('button').on('click',function() {
    if($(".first").is(":checked") || $(".second").is(":checked")) {
        $('.error').hide();
    } else {
        $('.error').text('You must select atleast one!').show();
    }
});

Также обратите внимание, что вам нужно .show()сообщение об ошибке в первом случае, как вы прячете его во втором.

А вот live демо .

Answer 5

Поставьте один и тот же класс на оба флажка, и вы можете сделать что-то вроде

if ($(':checkbox.the_class:checked').length > 0) {
  // at least one checkbox is checked
  // ...
}