Question

我有这个设置：

<style>.selectit{display:none;}</style>
<div id="foo">
<label class="selectit">
<input type="checkbox" name="one" id="one" checked>
One
</label>
<label class="selectit">
<input type="checkbox" name="two" id="two">
Two
</label>
<label class="selectit">
<input type="checkbox" name="three" id="three" checked>
Three
</label>
</div>

我只想显示已检查输入的Label标签，并隐藏其他标签。

对于已检查的输入标签，如show（），对于未经检查的输入标签，则为hide（）。

工作代码示例：

<style>.selectit{display:none;}</style>
<div id="foo">
<label class="selectit" style="display:block">
<input type="checkbox" name="one" id="one" checked>
One
</label>
<label class="selectit">
<input type="checkbox" name="two" id="two">
Two
</label>
<label class="selectit" style="display:block">
<input type="checkbox" name="three" id="three" checked>
Three
</label>
</div>

或者也许或许，制作一个新的div，只显示该div中已检查标签的文本。

<style>.selectit{display:none;}</style>
<div id="foo">
<label class="selectit">
<input type="checkbox" name="one" id="one" checked>
One
</label>
<label class="selectit">
<input type="checkbox" name="two" id="two">
Two
</label>
<label class="selectit">
<input type="checkbox" name="three" id="three" checked>
Three
</label>
</div>
<div id="output">One - Three</div>

这甚至可能吗？或者我是否需要通过附加搜索整个复选框的div来完成此操作？任何帮助都表示赞赏，因为我已经用尽了所有的选择，而且我的想法也没有。提前谢谢。

Answer 1

您可以使用filter方法过滤选中的复选框。

$('#foo input[type=checkbox]').filter(function(){
      return this.checked;
}).prev('label').show();

Answer 2

免责声明：此答案仅基于您的标题问题

我会选择纯粹的 CSS 。像

label {
    display: none;
} 

input:checked + label {
    display: block;
}

您只需稍微调整一下标记。

示例：http://jsfiddle.net/ZpmGd/

jQuery只显示已选中复选框的标签并隐藏未选中的复选框

2 个答案: