如果选中,我如何让我的复选框显示隐藏的跨度

时间:2014-05-22 14:09:53

标签: javascript php jquery html checkbox

这是我的复选框

<?php  $create = array(
           'name'=> 'single_obs_value',
           'id' => 'Heart_Rate',
           'class' => 'singleobs',
           'value' => $cp->odvalue_list_id,
           'checked' => sel_checkbox($singleobsnormal['single_obs_value'] == $cp->odvalue_list_id),
           'style'=> 'float: left; margin-right: 10px;'
       );
?>

当勾选我的复选框时,它会显示隐藏的跨度,当未勾选时,它会隐藏跨度。我用javascript完成了这个。

$('#Heart_Rate').on("change", function() {  

    if (this.checked) {

         $('#hrsObs').fadeIn('fast');

    } else {

        $('#hrsObs').fadeOut('fast');
    }
}   

如果我正在检查或取消选中该框,此功能非常有效。但是当页面加载时我需要一个函数来检查复选框是否被选中,从而隐藏或显示已经给出了一类#hrsObs的跨度。有什么建议吗?

3 个答案:

答案 0 :(得分:0)

$('#Heart_Rate').attr('checked') // give you you the information

答案 1 :(得分:0)

您可以在DOM ready事件中使用它:

$(document).ready(function(){
 if($('#Heart_Rate:checked').length){
   $('#hrsObs').fadeIn('fast');
}});

答案 2 :(得分:0)

尝试一下:

jQuery(document).ready(function(){ 

        //cache these since you'll be using them a few times
        var $heartRate  = $('#Heart_Rate'),
            $hrsObs     = $('#hrsObs');

            $heartRate.on("change", isChecked());

            function isChecked(){
                if($heartRate.prop("checked")){
                    $hrsObs.fadeIn('fast');
                }
                else{
                    $hrsObs.fadeOut('fast');
                }
            }

            //run function now that page has loaded
            isChecked();

    });