如果已经选中，则在页面加载时显示css

时间：2016-04-28 14:09:39

标签： javascript css

如果您在页面加载后返回并重新单击单选按钮，则我有以下代码可以正常工作。我想看看是否有一种方法可以在页面加载时扩展css，而不必在已经单击的情况下重新单击它。如果在页面加载时选中了ee1，则展开showee。所以回顾一下，一切正常，但你必须重新点击收音机扩展表ID，所以我想我需要修改我的javascript。

以下是关于jsfiddle的完整工作示例：https://jsfiddle.net/pinchetpooche/gnk5mpuv/1/ 

    <!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style>

.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;
}

.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;
}

</style>

<script language="JavaScript">   
    /*Environmental Event*/

$(document).ready(function(){
    $("#showee").css("display","none");
    $(".ee").click(function(){
        if ($('input[name=ee1]:checked').val() == "Yes" ) {
            $("#showee").slideDown("fast");
            $("#showet").slideDown("fast");
            $("#showspill").slideUp("fast");
            } else {            
                $("#showee").slideUp("fast");
                $("#showet").slideUp("fast");
            }     
    });
});

/*NonSpill Event*/
$(document).ready(function(){
    $("#showet").css("display","none");
    $(".et").click(function(){

        if      ($('input[name=eventtype]:checked').val() == "Air" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Water" ) 
                { 
                 $("#showet").slideDown("fast");
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Waste" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Spill" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideDown("fast"); 
                }

        else    { 
                 $("#showet").slideUp("fast"); 
                }

    });
});

</script>

</head>

<BODY>

<form id="form1" name="form1" method="post" action="add_incident.asp">

<table border="0" class="formset" >

     <tr>
        <td width="125"><label for="ee1" class="style8">Enviromental Event?</label></td>
        <td><input type="radio" name="ee1" value="Yes" class="ee" checked /><span class="style8"> Yes</span>
            <input type="radio" name="ee1" value="No"  class="ee"  /><span class="style8"> No</span> 
        </td>    
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>

</table>

<div>

<fieldset> 
<table id="showee" class="formset" align="left" border="0">
<tr>
<td>
        <table>
        <tr>
        <td width="100" align="left"><label for="eventtype" class="style8">Event Type</label></td>
        <td>
        <input type="radio" name="eventtype" value="Air"   class="et"/><span class="style8"> Air</span>
        <input type="radio" name="eventtype" value="Water" class="et" /><span class="style8"> Water</span>
        <input type="radio" name="eventtype" value="Waste" class="et"/><span class="style8"> Waste</span>        
        <input type="radio" name="eventtype" value="Spill" class="et"  /><span class="style8"> Spill</span> 
        &nbsp;        
        </td>
        </tr>
        </table>
</td>
</tr>
<tr> 
<td> 
        <fieldset>
        <table id="showet" align="left" border="0">  
            <tr>
            <td>

                <table>

                     <tr>
                        <td align="left" width="125"><span class="style8">Date of Event&nbsp;</span></td>
                        <td align="left" colspan="3"><input type="text" id="dateofevent" name="dateofevent" class="inputtext3">
                        <script language="JavaScript">
                        new tcal ({
                        'formname': 'form1',
                        'controlname': 'dateofevent'
                        });
                        </script>
                        &nbsp;
                        </td>
                    </tr>

                     <tr>
                        <td><span class="style8">Time of Event</span></td>
                        <td><INPUT TYPE="text" id="time1" NAME="time1" VALUE="" class="inputtext3" maxlength="4" onkeypress='validate(event)'></td>         
                      </tr>

                      <tr>
                        <td><span class="style8">Station</span></td>
                        <td>
                        <select name="station" id="station" class="drop7">
                            <option value=""></option>
                            <option value="A"><span class="style8">A</span></option>
                            <option value="B"><span class="style8">B</span></option>
                            <option value="C"><span class="style8">C</span></option>
                            <option value="D"><span class="style8">D</span></option>
                        </select>
                        </td> 
                      </tr>            

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

                    <tr>
                        <td colspan="6">&nbsp;</td>
                    </tr>                 
            </table>


            <table id="showspill">   
                <tr>
                    <td class="style9" width="200">SPILLS MENU</td>
                </tr> 

                <tr>
                    <td class="style9">General Information</td>
                </tr>

                <tr>
                    <td class="style8" width=133>Location of Spill</td>
                <td><input type="text" value=""  name="spillloc" class="inputtext5" /></td>                
                </tr>

                <tr>
                    <td class="style8" width=133>Person Who Reported the Spill</td>
                    <td><input type="text" value=""  name="spillperson" class="inputtext5" /></td>
                </tr>

                <tr>
                    <td class="style8" width=133>Cause of Spill</td>
                    <td><input type="text" value=""  name="cause" class="inputtext5" /></td>              
                </tr>

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

                <tr>
                    <td colspan="4">&nbsp;</td>
                </tr>

                <tr>
                    <td colspan="4">&nbsp;</td>
                </tr>
            </table>

        </td>
       </tr>            
      </table>
     </fieldset>

</td>   
</tr>      
</table>
</fieldset>   

</form>

</div>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

你可以使用localstorage，如：

localStorage.setItem("isChecked", $('input[name=ee1]:checked').val());

然后

if(localStorage.getItem("isChecked") == "Yes"){//do sth}

像这样：

$(document).ready(function(){
   $("#showee").css("display","none"); 
   
   if(localStorage.getItem("isChecked") == "Yes") 
     slideDown();
   
   else{
     
     $(".ee").click(function(){
       localStorage.setItem("isChecked", $('input[name=ee1]:checked').val()); 
       if(localStorage.getItem("isChecked") == "Yes"){ 
         slideDown();
       } 
     else {
       $("#showee").slideUp("fast");
       $("#showet").slideUp("fast");
     } 
   }); 
     
    var slideDown = function(){
       $("#showee").slideDown("fast"); 
       $("#showet").slideDown("fast");
       $("#showspill").slideUp("fast"); 
    }
 });

答案 1 :(得分：0)

我终于明白了，虽然可能是丑陋而不是最好的方式。相同的jsfiddle https://jsfiddle.net/pinchetpooche/gnk5mpuv/9/ 

    $(document).ready(function(){

    if ($('input[name=ee1]:checked').val() == "Yes" ) {
            $("#showee").slideDown("fast");
            $("#showet").slideDown("fast");                         
            }
    else {

    $("#showee").css("display","none");
    $("#showet").css("display","none");}
    $("#showspill").css("display","none");

    $(".ee").click(function(){

        if ($('input[name=ee1]:checked').val() == "Yes" ) {
            $("#showee").slideDown("fast");
            $("#showet").slideDown("fast");

            } else {                      
                $("#showee").slideUp("fast");
                $("#showet").slideUp("fast");
            }     
    });
});

$(document).ready(function(){

    if (!$('input[name=eventtype]:checked').val() == "Spill" ){ 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }
        else if ($('input[name=eventtype]:checked').val() == "Air" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Water" ) 
                { 
                 $("#showet").slideDown("fast");
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Waste" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Spill" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideDown("fast"); 
                }       

 else {

    $("#showet").css("display","none");}

    $(".et").click(function(){

        if (!$('input[name=eventtype]:checked').val() == "Spill" ){ 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }
        else if ($('input[name=eventtype]:checked').val() == "Air" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Water" ) 
                { 
                 $("#showet").slideDown("fast");
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Waste" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideUp("fast"); 
                }

        else if ($('input[name=eventtype]:checked').val() == "Spill" ) 
                { 
                 $("#showet").slideDown("fast"); 
                 $("#showspill").slideDown("fast"); 
                }

    });
});
相关问题
最新问题