jQuery - 在单击复选框时,在页面加载时使Div可见(如果已选中)

时间:2012-01-18 17:54:42

标签: java jquery html

当使用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)。

提前致谢。

4 个答案:

答案 0 :(得分:4)

我想从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/

答案 1 :(得分:1)

你需要做的就是

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

请注意,此代码将在文档就绪

上执行

答案 2 :(得分:1)

做这样的事情:

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

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

答案 3 :(得分:0)

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