2

我有这个设置：

<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 来做到这一点？感谢您提供任何帮助，因为我已经用尽了所有选择，而且我没有想法。先感谢您。

4

2 回答 2

3

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

$('#foo input[type=checkbox]').filter(function(){
      return this.checked;
}).prev('label').show();
于 2013-01-20T00:50:41.387 回答
2

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

为此，我会使用纯CSS。喜欢

label {
    display: none;
} 

input:checked + label {
    display: block;
}

你只需要稍微调整一下你的标记。

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

于 2013-01-20T01:01:14.303 回答