不仅在检查时显示负载

时间:2016-04-28 21:15:15

标签: javascript css

我在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>

3 个答案:

答案 0 :(得分:1)

更改以下内容的JS:

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

首先绑定click事件,然后在已过滤的:checked元素的页面加载时触发它。

答案 1 :(得分:1)

如果使用: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();     
});

});

Example

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

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

答案 2 :(得分:1)

你可以使用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();     
    });
});