Question

我该怎样才能完成这项工作......

如果我选择一个框，它会显示我的输入框或我需要在选中一个框时显示的内容......问题是我有5个复选框...

所以如果用户选择

Box 1 [x]
Box 2 [x]
Box 3 [x]
box 4 [x]
Box 5 [ ]

到目前为止，代码工作正常......但是他/她意识到不再需要Box 3并希望切换3 for 5 ...之前提交按钮

Box 1 [x]
Box 2 [x]
Box 3 [ ]
box 4 [x]
Box 5 [x]

当发生这种情况时，输入框会从显示更改为隐藏...我不希望这样，因为1,2,4和5仍然被选中...

如果没有选择任何人，那么确实没有显示任何内容......但只要选择了一个，那么必须显示输入框或按钮或文本或其他任何内容......

以下是测试代码：

HTML

  <input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_1" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_2" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_3" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_4" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_5" value="supplied" class="aboveage2" />

<ul id="date" style="display:none">
    <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>

Java

  $('#supplied, #supplied_1, #supplied_2, #supplied_3, #supplied_4, #supplied_5').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

实时测试的链接： http://jsfiddle.net/GBSZ8/284/

谢谢。

Answer 1

$('.aboveage2').live('change', function() {

    if ( $(".aboveage2:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

演示：http://jsfiddle.net/samliew/GBSZ8/295/

请注意live仅适用于jQuery 1.7或更低版本。要迁移到最新的jQuery，请参阅jQuery 1.9 .live() is not a function

<强>更新

您网站上的复选框类与问题中的复选框类不同!!!

请改用此选择器：

$('input[name*=accessory_id]').live('change', function() {

    if ( $("input[name*=accessory_id]:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

Answer 2

我改变了你的选择器。我的上下文有限，但根据您提供的样本，这似乎是一个更好的选择。

$('.aboveage2').bind('change', function(){
  var $inputs = $(this).siblings('input').add($(this));
  var checked = false;
  for (var i = 0; i < $inputs.length; i++) {
    var input = $inputs[i];
    checked = $(input).is(':checked');
    if (checked) break;
  }
  $('#date').toggle(checked);
});

此解决方案只是遍历每个复选框。如果选中该复选框，则它会从循环中断，并确保显示$（“＃date”）。否则它将隐藏$（“＃date”）。

http://jsfiddle.net/RV4aJ/

选中框上的显示框或输入框

2 个答案: