jQuery - 单击复选框时使 Div 在页面加载时可见（如果已选中）答案

【问题标题】：jQuery - Make Div Visible When Checkbox is Clicked, On PageLoad (If already checked)jQuery - 单击复选框时使 Div 在页面加载时可见（如果已选中）
【发布时间】：2012-02-13 10:54:14
【问题描述】：

当使用 jQuery/Java 单击复选框时，我需要使 div 可见。 “已选中”来自数据库，因此我还需要检查该复选框是否已在页面加载时选中。

这是我目前拥有的：

<input type="checkbox" name="foo" value="1" onclick="$(this).is(':checked') && $('#checked-a').slideDown('slow') || $('#checked-a').slideUp('slow');"/>

<div class="dis-sub" style="display: none;" id="checked-a">
    ...
</div>

代码按原样显示/隐藏 div。我需要一个检查页面加载的解决方案，以查看复选框是否已被选中（在这种情况下是动态的，由数据库中的 PHP 进行）。

提前致谢。

【问题讨论】：

标签： java jquery html

【解决方案1】：

我想从您的 HTML 标记中删除 onclick javascript 调用并放入您的脚本文件中。这使代码更加简洁。

这将在您选中复选框时更改可见性。（假设复选框的 id 为“foo”）

$("#foo").change(function(){

   var ischecked=$(this).is(':checked'); 
    if(ischecked)
    {
         $("#checked-a").fadeIn(200);
    }
    else
    {
        $("#checked-a").fadeOut(200);   
     }

});

如果你想检查数据库中的值并改变可见性，你可以在你的 html 中设置你选中的属性值（使用你从数据库中获得的 PHP 变量值），然后检查你的复选框的选中属性的值并改变可见性

HTML

   <input type="checkbox" id="foo" value="1" checked="checked"/>
<div style="display:none;" id="checked-a">
    Some content
</div>

Javascript

 $(function(){

    var ischecked=$("#foo").is(':checked'); 
   if(ischecked)
   {
       $("#checked-a").fadeIn(200);
   } 
    else
    {
        $("#checked-a").fadeOut(200);   
     }

});

这里是示例：http://jsfiddle.net/Uj4QJ/9/

【讨论】：

【解决方案2】：

做这样的事情：

$("#foo").click(function() {
    $('#checked-a')[$(this).prop('checked')?'slideDown':'slideUp']('slow');
}).triggerHandler('click');

示例：http://jsfiddle.net/petersendidit/zQKmm/1/

【讨论】：

【解决方案3】：

你要做的就是

<script type="text/javascript">
  $(function(){
     if($('input[name = "foo"]').is(':checked'))
        $('#checked-a').slideDown('slow');
  });
</script>

请注意，此代码将在文档就绪时执行

【讨论】：

【解决方案4】：

if($('input:checkbox').prop('checked')) {
    //checkbox is checked, do stuff
}

【讨论】：