Question

当我检查包含标签/复选框时，我试图使嵌套标签/复选框可见。我无法弄清楚如何定位特定的嵌套标签，或者这是否是正确的方法。

这是一个小提琴：

这是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

如果您使用了.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; }

希望有所帮助！

修改

为了检查＆amp;取消选中容器中的第一项只需将以下两个函数添加到您的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(); });

显示/隐藏嵌套复选框标签

2 个答案: