jQuery 如果选中复选框，请执行此操作答案

【问题标题】：jQuery if checkbox is selected do thisjQuery 如果选中复选框，请执行此操作
【发布时间】：2012-08-08 00:30:36
【问题描述】：

我有两个隐藏在$(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();
        }   
    });

【问题讨论】：

这是一个真正的问题，虽然它可能比其他问题更简单，但发帖者正在寻求帮助，甚至有他认为应该工作的代码（让我们面对现实吧，这并不常见q 与此类似），我认为这不应该被否决。
jquery checkbox event handling的可能重复
我在这件事上搜索了至少 45 分钟。我不明白你怎么能拒绝投票，我的代码看起来完全不像你链接到的帖子上的那个。
是的，我同意@Charlie 的观点……仅仅因为某人对特定技术不熟悉并不意味着他们的问题是无效的（我将通过投票来补偿你！）。
你的评论是针对我的吗？不用担心，我没有投反对票。而且我认为您问的问题与另一个问题相同（当复选框状态更改时如何做某事），这就是为什么我投票将其作为重复项关闭。

标签： javascript jquery forms checkbox

【解决方案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();
    }
  });
});

【讨论】：

补充一点：OP 的代码不工作的原因是因为它绑定到 document.ready （所以它只检查一次状态，当文档准备好时）。您需要将代码绑定到将触发代码的实际事件。

【解决方案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');

});

【讨论】：

event 无需触发器即可工作，但如果最初未选中复选框，则调用 trigger 会使 div 最初隐藏。

【解决方案3】：

要评估是否发生了变化，您需要在事件中编写代码！（在这种情况下：change）因为您正在做的是在 $(document).ready 处获取 is(':checked') 的值，并且它将始终返回 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();
     }
  });
});

【讨论】：

($(this).is(':checked')) ? true : false; 是多余的。 $(this).is(':checked') 已经返回一个布尔值。