如果选中复选框，如何仅显示输入字段？

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）。

Working demo

Answer 3

你可以用纯CSS3做到这一点，当然：

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

等效的选择器也应该在jQuery中运行得很好。

Answer 4

试试这个：

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

Answer 5

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

$('#supplied').on('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();
     }
 });