javascript - jQuery 仅显示已选中复选框的标签并隐藏未选中的复选框

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>

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

类似 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();