如果選中復選框，如何僅顯示輸入字段？

Question

基本上，我想只顯示這些字段，如果選中復選框，如果它被取消選中，則消失。

<input type="checkbox" name="supplied" value="supplied" class="aboveage2" />

<ul id="date">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

我嘗試過類似的東西：

$('#supplied').live('change', function(){
     if ( $(this).val() === 'supplied' ) {
         $('.date').show();
     } else {
         $('.date').hide();
     }
 });

任何建議將不勝感激=）

Answer 1

“#foo”選擇器查找id值為“foo”的元素，而不是“name”。 因此，您需要做的第一件事是在復選框中添加“id”屬性。

需要擔心的第二件事是，在IE（至少舊版本）中，只有在復選框元素失去焦點時才會觸發“更改”事件。 最好處理“click”，你要檢查的是元素的“checked”屬性。

我寫的是：

$('#supplied').click(function() {
  $('.date')[this.checked ? "show" : "hide"]();
});

Answer 2

Pointy指出你需要設置我們的復選框的id（或使用名稱選擇器）。 你還需要使用#date （ID），而不是.date （類）（或再次更改HTML）。

工作演示

Answer 3

你可以用純CSS3做到這一點，當然：

:checked + #date { display: block; }
#date { display: none; }

等效的選擇器也應該在jQuery中運行得很好。

Answer 4

Matthews的回答很有效，只是在jQuery 1.7中棄用的.live使用.on

$('#supplied').on('change', function(){
    if ( $(this).is(':checked') ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

Answer 5

嘗試這個：

$('input[name=supplied]').live('change', function(){
     if ( $(this).is(":checked")) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

Answer 6

嘗試類似的東西：

$('#supplied').live('change', function(){
     if ( $(this).attr("checked")) {
         $('.date').show();
     } else {
         $('.date').hide();
     }
 });