Javascript 未选中复选框时隐藏div

我试图显示隐藏的文本，如果至少有一个复选框被选中，并隐藏它，如果没有被选中。我有多个复选框。当我选中复选框时，隐藏文本不会显示。有什么帮助吗？ 这是小提琴

如果（$（'input[name=“ch[]”）是（':checked'））
$（“.txt”）.show（）；//选中的
其他的
$（“.txt”）.hide（）；//未经检查

使用事件处理程序将代码封装起来

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

});

---

使用事件处理程序将代码括起来/包装起来，如

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

});

---

您可以只检查选中复选框的长度

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

---

您可以只检查选中复选框的长度

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

---

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

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

---

这是一个每次单击时都会检查函数的对话框。

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

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

---

这是一个在每次单击时检查函数的方法。

在代码中，当页面加载时，对选中/未选中框的测试只发生一次。每次任何复选框的值更改时，都应运行此检查。差不多

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

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

---

jsiddle:

在代码中，当页面加载时，对选中/未选中框的测试只发生一次。每次任何复选框的值更改时，都应运行此检查。差不多

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

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

---

jsIDLE:

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

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

---

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

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

演示：

演示：

---

事件处理程序数量最少的版本：

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

---

Fiddle:

事件处理程序数量最少的版本：

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

Fiddle:

我只将代码放入更改事件处理程序我只将代码放入更改事件处理程序