未選中復選框時隱藏div

Question

我試圖顯示至少選中一個復選框時顯示的隱藏文本，如果沒有選中則隱藏它。 我有多個復選框。當我檢查復選框時，隱藏的文本不會顯示。 有什么幫助嗎？ 這是小提琴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
});

這是一個更新的小提琴 ，它每次單擊時都會檢查您的功能。

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/