在加载时显示，而不仅仅是在选中时显示

Display on load not just when checked

本文关键字：显示不仅仅是加载更新时间：2023-09-26

我在 https://jsfiddle.net/pinchetpooche/xgugjojq/5/有演示设置

我希望如果在页面加载时选中"是"，它会显示检查的结果。这只有在我返回并检查是时有效，即使它已经被检查过。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    if ($('.trigger').is(':checked'))  {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();                            
            }
    $('.trigger').click(function() {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();     
    });
});
</script>
<style>
.gads {
    border:none;
    background-color:transparent;
    outline:none;
}
.content {
    display: none;
}
.none {
    border:none;
    background-color:transparent;
    outline:none;
}
.ee {
    border:none;
    background-color:transparent;
    outline:none;
}
.et {
    border:none;
    background-color:transparent;
    outline:none;
}
.gads-yes { 
    border:none;
    background-color:transparent;
    outline:none;
}
.gads-no { 
    border:none;
    background-color:transparent;
    outline:none;
}
.gads-na { 
    border:none;
    background-color:transparent;
    outline:none;
}
.ee-yes { 
    border:none;
    background-color:transparent;
    outline:none;
}
.ee-no { 
    border:none;
    background-color:transparent;
    outline:none;
}
</style>
</head>
<BODY>

<div id="content">
<form id="form1" name="form1" method="post" action="add_incident.asp">
<table border="0" class="formset" >
     <tr>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><label class="style8">Event?</label></td>
        <td>     
        <input type="radio" name="age1" value="Yes" class="gads-yes trigger" data-rel="gads-yes" /><span class="style8"> Yes</span>
        <input type="radio" name="age1" value="No" class="gads-no trigger" data-rel="gads-no" /><span class="style8"> No</span>
        <input type="radio" name="age1" value="NA" class="gads-na trigger" data-rel="gads-na" /><span class="style8"> NA</span>
        </td>
    </tr>
</table>
<div>
    <div class="gads-yes content"> 
<table border="0" class="formset">
    <tr>
        <td class="style9">MENU</td>
    </tr>

    <tr>
        <td><label for="description" class="style8">Description</label></td>
        <td colspan="2" class="textarea"><textarea class="textbox2" id="description" name="description" rows="3"></textarea></td>
    </tr>
    <tr>
        <td colspan="3" align="right"><input type="submit" name="submit3" value="Submit" class="form_button_clear" /></td>
    </tr>
</table>
</div>
<div class="gads-no content">
<table border="0" class="formset" >
    <tr>
        <td colspan="4" class="style9">MENU 2</td>
    </tr>
    <tr>
        <td><label for="description1" class="style8">Description Two</label></td>
        <td colspan="3"><textarea id="description1" name="description1" rows="3" class="textbox2"></textarea></td>
    </tr>

    <tr>
        <td colspan="4" align="right"><input type="submit" name="submit2" value="Submit" class="form_button_clear" /></td>
    </tr>
</table>
</div>
</div>
</form>
</body>
</html>

更改以下内容的 JS：

<script>
    $(document).ready(function(){
        $('.trigger').on('click', function() {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();     
        }).filter(':checked').trigger('click');
    });
</script>

首先绑定 click 事件，然后在筛选的 :checked 元素上的页面加载时触发它。

如果使用：

eq（0）更改选择器

$(document).ready(function(){
if ($('.trigger:eq(0)').is(':checked'))  {
        $('.content').hide();
        $('.' + $('.trigger:eq(0)').data('rel')).show();                            
        }

$('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();     
});

}）;

例

或者您可以使用 gads-yes 选择器

 $('.' + $('.gads-yes').data('rel')).show();

你可以使用 hide（）的回调：

$(document).ready(function(){       
        //Wait until the content's hidden before showing the selected item
        $(".content").hide(function(){
            $("." + $(".trigger:checked").data("rel")).show();
        });
   $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();     
    });
});