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

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(至少是旧版本)中,只有在checkbox元素失去焦点时才会触发"更改"事件.最好处理"click",你要检查的是元素的"checked"属性.

我写的是:

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