jquery 隐藏仅有效一次

Question

我有一个最初隐藏的区域，应该根据字段的内容出现/消失。

因此，如果用户选择通过信用卡付款，那么额外的字段就会打开，如果没有，那么它们就会消失。

问题是它只能显示它们而不是隐藏它们。

有人可以看这里：http://bit.ly/dOCNQQ

提前致谢！

$(function(){ 
    $('#CCinfo').hide();       
    $('#paymethod').change(function(){
    var payme = $(this).val();
    if (payme=='CreditCard') {
            $('#CCinfo').show("slow");
        } else {
            $('#CCinfo').hide();    
        }
    });
});

<tr>
 <td colspan="2" align="right">
  <strong>pay by:</strong><br />
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="CreditCard"/>credit card<br />
  <tr>
   <td colspan="2" align="right"><strong>pay by:</strong><br />
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="CreditCard"/>credit card<br />&nbsp;
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="Check"/>cash<br />&nbsp;
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="At Dinner"/>check
   </td>
  </tr>
  &nbsp;
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="Check"/>cash<br />&nbsp;
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="At Dinner"/> check
 </td>
</tr>

Answer 1

在您的示例中，多个输入具有相同的 id“paymethod”，然后您可以使用它来侦听 change 事件。在 HTML 中，元素的 id 属性必须是唯一的，当您调用 $("#paymethod") 时，它只会查找具有该 id 的第一个输入。您应该删除公共 id 属性或创建唯一的 id 属性。您应该使用 name 属性来定位无线电输入。

所以 HTML 会是这样的：

<td align="right" colspan="2"><strong>pay by:</strong><br>
    <input type="radio" value="CreditCard" class="required" title="*" name="paymethod">credit card<br> 
    <input type="radio" value="Check" class="required" title="*" name="paymethod">cash<br> 
    <input type="radio" value="At Dinner" class="required" title="*" name="paymethod"> check
</td>

获取 radio 元素的 JS 会是：

$("input[name='paymethod']").change(function() { ... });

Answer 2

所有单选按钮都有相同的 ID。当您选择 $('#paymethod').val() 时，您仅获得第一个单选按钮的值。巧合的是，这始终是信用卡。

尝试：

$('input[name="paymethod"]').click(function (e) {
    if (e.target.value == 'CreditCard') {
        $('#CCinfo').show("slow");
    } else {
        $('#CCinfo').stop().hide();
    }
});

Answer 3

我看了你的代码。多个输入元素不能具有相同的 ID。代码中发生这种情况的原因是因为点击处理程序仅适用于 ID 作为 paymethod 的第一个元素，而不适用于其他两个元素。只需为所有这些使用一个公共类，并将单击处理程序绑定到该类即可。