javascript - 如果选中复选框，如何只显示输入字段？

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(至少是旧版本)中，“change”事件直到复选框元素失去焦点才会被触发。最好处理“点击”，要检查的是元素的“checked”属性。

我要写的是这样的:

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