jQuery如果复选框被选中

我有两个div元素在$(document).ready(function(){}上隐藏，如果它们的特定复选框被选中，它们应该出现，如果它被选中然后取消选中，它们会消失。我可以显示元素时，选中该复选框很容易使用show()或slideDown()但是当我使用的if else语句返回为假，每次和形式留下隐患......jQuery如果复选框被选中

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

来源

2012-08-08 Ty Bailey

这是一个真正的问题，尽管它可能会比其他人更简单，海报正试图寻求帮助，甚至有说，他认为应该是工作代码（让我们面对它，这不是很经常与Q的外形酷似这），我不认为这应该被投票。 – Charlie 2012-08-08 00:35:23

可能重复的[jquery复选框事件处理]（http://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling） – 2012-08-08 00:36:48

我搜索了至少45分钟这一件事。我不明白你如何投票，我的代码看起来完全没有像你链接到的帖子。 – 2012-08-08 00:41:15

见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'); 

});

来源

2012-08-08 00:40:38 Johnny5

我认为它仍然工作，没有触发器 – arufian 2012-08-08 01:08:57

_event_没有触发器工作，但调用触发器，使最初隐藏如果该复选框没有最初检查。 – Johnny5 2012-08-08 01:15:34

我更新了小提琴url，它不是正确的版本 – Johnny5 2012-08-08 01:15:59

你没有约束力这段代码到适当的事件：

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

来源

2012-08-08 00:34:08 Blender

要补充的是：OP代码不工作的原因是因为它被绑定到document.ready（所以它只在文档准备就绪时检查一次状态）。您需要将代码绑定到将触发代码的实际事件。 – JamesSwift 2012-08-08 01:11:43

评价，如果事情发生了变化，你需要做的事件里面的代码！（在这种情况下：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(); 
    } 
    }); 
});

来源

2012-08-08 00:42:12

'（$（this）.is（'：checked'））？ true：false;'是多余的。 '$（this）.is（'：checked'）'已经返回一个布尔值。 – Blender 2012-08-08 00:47:22

你是对的，是我的错误...现在纠正:-) – 2012-08-08 00:49:40

jQuery如果复选框被选中

回答

相关问题