根据两个复选框隐藏或显示div(至少有一个复选框)

时间:2013-12-03 09:44:38

标签: jquery html checkbox

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

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

检查项目的数量永远不会小于零,因此您的if语句逻辑在这方面存在缺陷。此外,选择器正在寻找input作为.checks的子项,这是不正确的。试试这个:

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

答案 2 :(得分:0)

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();
    }
});