Question

如果选中至少一个复选框，我试图显示隐藏文本，如果没有选中则隐藏它。我有一个多个复选框。当我检查checkooxes时，隐藏文本没有显示。有帮助吗？这是小提琴http://jsfiddle.net/HDGJ9/1/

<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<input type="checkbox" name="ch[]">
<div class="txt" style="display:none">


if($('input[name="ch[]"]').is(':checked'))
$(".txt").show();  // checked
else
$(".txt").hide();  // unchecked

Answer 1

使用 event handler （例如

）封闭/包装您的代码

$('input[name="ch[]"]').on('change', function () {
 //your code

});

JSFiddle

Answer 2

您只需检查已选中复选框的长度......

var $checkboxes = $(':checkbox');
$checkboxes.on('change', function(){
  $('.txt').toggle( $checkboxes.filter(':checked').length > 0 );
});

Answer 3

没有执行您的javascript代码。有许多方法可以执行，还有很多方法可以实现您想要的结果。您可以将其分配给单击或更改事件，如下所示：

$("input[name='ch[]']").click(function() {
    if($('input[name="ch[]"]').is(':checked'))
        $(".txt").show();  // checked
    else
        $(".txt").hide();  // unchecked
});

这是updated fiddle，每次点击都会检查你的功能。

Answer 4

在您的代码中，选中/取消选中框的测试仅在页面加载时发生一次。每次复选框的值发生变化时，都应该运行此检查。像

这样的东西

function refresh() {
    if ($('input[name="ch[]"]').is(':checked')) {
        $(".txt").show(); // checked
    } else {
        $(".txt").hide(); // unchecked
    }
}

$('input:checkbox').change(refresh);

JSFiddle：http://jsfiddle.net/MHB8q/1/

Answer 5

您在此处选择所有四个复选框元素，您只需选择一个已选中的元素，然后查看是否得到结果：

if($('input[name="ch[]"]').filter(':checked').length){
    $(".txt").show();  // checked
} else {
    $(".txt").hide();  // unchecked
}

Answer 6

演示：http://jsfiddle.net/HDGJ9/10/

$('input[name="ch[]"]').on('change', function() {

  if ($(this).is(':checked')) {
    $('.txt').css('display', 'block');
  }

  else {
    var checked = false;
    $('input[name="ch[]"]').each(function(i, el) {
      if ($(el).is(':checked')) checked = true;
    });
    if (!checked) $('.txt').css('display', 'none');
  }

});

Answer 7

具有最少事件处理程序的版本：

$(document).on("change", ":checkbox", function(){
var isAtLeastOneCheckboxChecked = $(':checkbox').filter(":checked").length > 0;
if (isAtLeastOneCheckboxChecked)
    $('.txt').show();
else
    $('.txt').hide();
});

小提琴：http://jsfiddle.net/3d79N/

没有选中复选框时隐藏div

7 个答案:

JSFiddle