显示/隐藏嵌套复选框标签
显示/隐藏嵌套复选框标签
提问于 2014-06-12 17:32:38
当选中包含label/复选框时，我试图使嵌套的label/复选框可见。我不知道如何针对特定的嵌套标签，或者这是否是正确的方法。
这里有一把小提琴：
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();
}
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-06-12 17:55:14
关于这一点的几点想法：
- 如果不在标签内嵌套多个控件(如果正确使用html
for属性，则会导致问题)，您的html结构可能会更好一些。 - 有时，阅读css类比使用内联样式更容易(
hide()和show()实际上是这样做的)。
考虑到这一点，我建议如下。JSFIDDLE：http://jsfiddle.net/SaHGs/
<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();
});Stack Overflow用户
发布于 2014-06-12 17:40:26
如果您使用了.show()，则visibility:hidden;不会显示元素
我建议你用
style="display:none;" 而不是
style="visibility:hidden;"DEMO
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24190532
复制相关文章
相似问题
腾讯云开发者
