Question

我有两个隐藏在$(document).ready(function(){}上的div元素，如果选中了特定的复选框，它们应该会出现，如果选中它然后取消选中它们就会消失。我可以使用show()或slideDown()轻松选中复选框时显示该元素，但是当我使用if else语句时，它每次都返回false并且表单保持隐藏...

$(document).ready(function(){
        if($("#upload_yes").is(':checked')) {
            $("#upload_form").show();
        } else {
            $("#upload_form").hide();
        }

        if($("#new_info_yes").is(':checked')) {
                $("#new_info_form").slideDown(500);
        } else {
                $("#new_info_form").hide();
        }   
    });

Answer 1

您没有将此代码绑定到正确的事件：

$(document).ready(function() {
  $("#upload_yes").on('change', function() {
    if ($(this).is(':checked')) {
      $("#upload_form").show();
      $("#new_info_form").slideDown(500);
    } else {
      $("#upload_form, #new_info_form").hide();
    }
  });
});

Answer 2

请参阅this fiddle

您必须在change事件中完成工作。

然后在复选框上调用.trigger('change')使div显示/隐藏在初始页面加载上。

代码：

$(document).ready(function(){

    $('input#upload_yes').change(function(){
        if($(this).is(':checked')) {
            $("#upload_form").show();
        } else {
            $("#upload_form").hide();
        }
    });

    $('input#new_info_yes').change(function(){
         if($(this).is(':checked')) {
                $("#new_info_form").slideDown(500);
        } else {
                $("#new_info_form").hide();
        }   
    });

    //Trigger the change event so the divs are initially shown or hidden.
    $('input[type=checkbox]').trigger('change');

});

Answer 3

要评估某些内容是否已更改，您需要在活动中执行代码！（在这种情况下：change），因为您正在做的是在is(':checked')处获得$(document).ready的值，并且它将始终返回false，因为在第一时间您的元素没被检查。

嗯，这是正确的方法： - ）

（我试图减少代码）

现场演示：

http://jsfiddle.net/oscarj24/RSDRg/

<强>代码：

$(document).ready(function() {
  $('#upload_yes').on('change', function() {
     var done = $(this).is(':checked');
     if(done) {
       $('#upload_form').show();
       $('#new_info_form').slideDown(500);
     } else {
       var frm = $('#upload_form').add('#new_info_form');
       frm.hide();
     }
  });
});

如果选中复选框，则执行此操作

3 个答案: