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（）爲checked選項標籤和隱藏（）爲未選中的。工作代碼

例如：

<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並只顯示該分區的檢查標籤的文本。

<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/