скрыть или показать div в зависимости от двух флажков (по крайней мере один из них отмечен)

Question

Я пытаюсь показать или скрыть кнопку, когда отмечен хотя бы один из двух флажков, я пытаюсь использовать jQuery, но он не работает , Может ли кто-нибудь помочь мне или показать пример, который я могу использовать?

Вот мой код:

<input type="checkbox" id="p1_perro" class="checks" name="p1[]" value="p1_perro" /> 
<label>Perro</label><br /> 

<input type="checkbox" id="p1_gato" class="checks" name="p1[]" value="p1_gato" /> 
<label>Gato</label><br />  

<input type="checkbox" id="p1_pajaro" name="p1[]" value="p1_pajaro" /> 
<label>Pájaro</label><br /> 

<input type="checkbox" id="p1_roedor" name="p1[]" value="p1_roedor" /> 
<label>Roedor</label><br /> 

if ($('.checks').find('input:checked').length < 0) { 
    $("#btnSiguiente1").hide(); 
    $("#enviar").show(); 
} 
else { 
    $("#btnSiguiente1").show(); 
    $("#enviar").hide(); 
} 

Answer 1

Вы не должны использовать .find(), он ищет узелов

if($('.checks:checked').length == 0){ 
    $("#btnSiguiente1").hide(); 
    $("#enviar").show(); 
}else{ 
    $("#btnSiguiente1").show(); 
    $("#enviar").hide(); 
} 

или использовать фильтр

if($('.checks').filter('input:checked').length == 0){ 
    $("#btnSiguiente1").hide(); 
    $("#enviar").show(); 
}else{ 
    $("#btnSiguiente1").show(); 
    $("#enviar").hide(); 
} 

Примечание : Это должно быть выполнено в обработчике изменений для .checks как

var $checks = $('.checks').change(function() { 
    var flag = $checks.filter(':checked').length == 0; 
    $("#btnSiguiente1").toggle(!flag); 
    $("#enviar").toggle(flag); 
}) 

Демо: Fiddle

Answer 2

Количество проверяемых деталей никогда не может быть меньше нуля, так что ваша if заявление логика ущербна в этом отношении. Кроме того, селектор ищет input в качестве ребенка .checks, что неверно. Попробуйте это:

if ($('.checks:checked').length == 0){ 
    $("#btnSiguiente1").hide(); 
    $("#enviar").show(); 
} 
else { 
    $("#btnSiguiente1").show(); 
    $("#enviar").hide(); 
} 

Answer 3

fiddle Demo

var checks = $('.checks'), 
    enviar = $("#enviar"), 
    btnSiguiente1 = $("#btnSiguiente1"); 
btnSiguiente1.add(enviar).hide(); 
checks.change(function() { 
    if (checks.filter(':checked').length) { 
     btnSiguiente1.hide(); 
     enviar.show(); 
    } else { 
     btnSiguiente1.show(); 
     enviar.hide(); 
    } 
});