顯示/隱藏嵌套的復選框標簽

Question

我試圖使嵌套的標簽/復選框被選中時可見。 我不知道如何定位特定的嵌套標簽，或者這是否是正確的方法。

這是一個小提琴：

http://jsfiddle.net/kirkbross/tfKva/15/

這是JavaScript：

$(".label-1").click(function() {
    $("input:checkbox").each(function() {
        if ($(this).prop("checked")) {
            $(this).next('.label-2').show(); // can't figure out how to get at the second "nested" label

        } else {
            $(this).next('.label-2').hide();
        }
    });
});

Answer 1

如果使用了visibility:hidden; .show()不會顯示元素visibility:hidden;

我會建議您使用

  style="display:none;" 

代替

 style="visibility:hidden;"

DEMO

Answer 2

關於此的一些想法：

• 你的HTML可能是一個更好一點的結構通過不嵌套的標簽內的多個控件（如果你使用的HTML，這將導致問題for屬性正確）。
• 有時，讀取CSS類比使用內聯樣式要容易（ hide()和show()實際作用）

考慮到這一點，我建議以下內容。 JSFIDDLE ： http ： //jsfiddle.net/SaHGs/

HTML

<div class="check-container">
  <label for="label1">This is label 1</label>
  <input type="checkbox" id="label1" class="hideshow" />

  <div class="autohide checkhidden">
    <label for="label2">This is label 2</label>
    <input type="checkbox" id="label2" />
  </div>
</div>

使用Javascript

$(function () {
  $(".hideshow").click(function(args) {
    var showStuff = $(this).prop("checked");
    $(this).parent().find(".autohide").each(function () {
      if (showStuff)
        $(this).removeClass("checkhidden");
      else
        $(this).addClass("checkhidden");
    });
  });
});

CSS

ul { list-style:none; }
li {margin-bottom:20px; }

.check-container {
    position: relative;
    display:block;
    width:300px;
    height:200px;
    background: #e8e8e8;
}

.checkhidden { display: none; }

希望有幫助！

編輯

為了選中和取消選中容器中的第一項，只需將以下兩個函數添加到您的javascript中：

$(".check-container").click(function () {
    var el = $(this).find("input:first");
    el.prop("checked", !el.prop("checked")).change();
});

$("input, label").click(function (e) {
    e.stopPropagation();
});