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

我有两个div元素，它们隐藏在$document.readyfunction{}上，如果选中了它们的特定复选框，它们应该会出现，如果选中然后取消选中，它们就会消失。当使用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();
        }   
    }); 

---

您没有将此代码绑定到适当的事件：

$(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();
    }
  });
}); 

---

您没有将此代码绑定到适当的事件：

$(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();
    }
  });
}); 

看

您必须在更改事件中执行此操作

然后在复选框上调用.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');

}); 

看

您必须在更改事件中执行此操作

然后在复选框上调用.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');

}); 

---

要评估是否有更改，您需要在事件中执行代码！在这种情况下：更改，因为您要做的是在$document.ready处获取is'：checked'的值，并且它将始终返回false，因为在第一时刻您的元素没有被检查

这是正确的方法：-

我试图减少代码

现场演示：

代码：

---

要评估是否有更改，您需要在事件中执行代码！在这种情况下：更改，因为您要做的是在$document.ready处获取is'：checked'的值，并且它将始终返回false，因为在第一时刻您的元素没有被检查

这是正确的方法：-

我试图减少代码

现场演示：

代码：

---

这是一个真实的问题，虽然可能比其他问题简单，但海报试图寻求帮助，甚至有他认为应该有效的代码——让我们面对现实吧，这与q类似的情况并不常见，我认为这不应该被否决。可能重复我在这件事上搜索了至少45分钟。我不明白你怎么能投反对票，我的代码和你链接到的帖子上的代码完全不一样。是的，我同意@Charlie…仅仅因为某人对某项特定技术不熟悉并不意味着他们的问题无效，我会投你的票来补偿他们的问题！。你的评论是针对我的吗？不用担心，我没有否决投票。我想你问的问题和另一个问题一样，当复选框状态改变时，如何做一些事情，这就是为什么我投票将其作为副本关闭。这是一个真实的问题，虽然可能比其他问题简单，但海报试图寻求帮助，甚至有他认为应该有效的代码。让我们面对现实吧，这种情况在q中并不常见，我认为这不应该被否决。我在这件事上搜索了至少45分钟，可能是重复的。我不明白你怎么能投反对票，我的代码和你链接到的帖子上的代码完全不一样。是的，我同意@Charlie…仅仅因为某人对某项特定技术不熟悉并不意味着他们的问题无效，我会投你的票来补偿他们的问题！。你的评论是针对我的吗？不用担心，我没有否决投票。我想你问的问题和另一个问题一样，当复选框状态改变时，如何做一些事情，这就是为什么我投票将其作为重复项关闭。$this.is'：checked'？真：假；这是多余的$this.is'：checked'已返回布尔值。$this.is'：checked'？真：假；这是多余的$this.is'：checked'已返回一个布尔值。要添加到这一点：OP代码不工作的原因是它绑定到document.ready，因此它只在文档准备就绪时检查一次状态。您需要将代码绑定到将触发代码的实际事件。若要添加：OP代码无法工作的原因是它已绑定到document.ready，因此它仅在文档准备就绪时检查一次状态。您需要将代码绑定到将触发代码的实际事件。事件在没有触发器的情况下工作，但如果复选框未初始选中，则调用触发器使div初始隐藏。事件在没有触发器的情况下工作，但如果复选框未初始选中，则调用触发器使div初始隐藏。