jquery - 隐藏或显示div取决于两个复选框(至少选中一个复选框)

我试图在选中两个复选框中的至少一个时显示或隐藏一个按钮，我正在尝试使用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();
}

最佳答案

您不应该使用.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

关于jquery - 隐藏或显示div取决于两个复选框(至少选中一个复选框)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20347608/