javascript - 根据复选框单击隐藏/显示 div。在 jsFiddle 中工作，但不会在我的网站上。有任何想法吗？

Question

根据复选框单击隐藏/显示 div。在 jsFiddle 中工作，但不会在我的网站上。有任何想法吗？

我要做的是有多种付款方式（CC、Paypal 等），根据您检查的方式，我将显示该方式的相关付款信息。

这是相关的 jsFiddle 链接：

http://jsfiddle.net/mxRCz/88/

我的 JS 是：

$('#CCMethod').change(function(){
  if (this.checked) {
    $('#CCPay').fadeIn('slow');
  } else {
    $('#CCPay').fadeOut('slow');
  }                   
});

我的站点暂存区位于：https ://rsatestamls.kaliocommerce.com:444/checkout.aspx

Answer 1

这是因为你的剧本

  $('#CCMethod').change(function(){
      if ($(this).is(':checked')) {
        $('#CCPay').fadeIn('slow');
      } else {
        $('#CCPay').fadeOut('slow');
      }                   
    });

在声明之前运行#CCMethod。将其包装在文档就绪中：

$(function() {
    ('#CCMethod').change(function(){
      if ($(this).is(':checked')) {
        $('#CCPay').fadeIn('slow');
      } else {
        $('#CCPay').fadeOut('slow');
      }                   
    });
 });

Answer 2

I'd recommend to use click event instead of change, change is buggy in old IE (jQuery probably handles this bug, but it's kinda good practice anyway). So try if click works for you.

If you don't care about IE<9, take a look at :checked pseudoselector. This option doesn't require javascript. Take a look here: http://jsfiddle.net/y9cQD/ (show/hide animation could be added via transition)

P.S. just noticed answer from J Torres - could be the cause.

Answer 3

换行：

if (this.checked) {

为了这：

if ($(this).is(':checked')) {

要检查复选框是否被选中，您必须使用 ' :checked ' jQuery 选择器。