在页面加载时显示 css(如果已选中）
Displaying css on page load if already checked
我有以下代码，如果您在页面加载后返回并重新单击单选按钮，则可以完美运行。 我想看看是否有办法在页面加载时扩展 css，而不必在已经单击时重新单击它。 如果在页面加载时选中 ee1 是，则展开显示者。 所以回顾一下，一切正常，但你必须重新单击收音机才能展开表 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> </td>
<td> </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>
</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 </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>
</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"> </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"> </td>
</tr>
<tr>
<td colspan="4"> </td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</body>
</html>
你可以像这样使用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");
}
});我终于明白了，尽管可能很丑，而且不是最好的方法。 相同的 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");
}
});
});
相关文章：
- 如果文本字段为空，则使用JavaScript应用CSS样式
- 如果30秒未单击，请应用CSS一次，将其删除，然后重新迭代
- 如果URL为(value），则使用css类
- 我应该连接/缩小已经缩小的JS/CSS吗?如果是，如何
- 如果类中的数字大于0，请使用JavaScript更改CSS背景
- 如果.htaccess文件中只写了一行代码，那么我所有的css和js都不起作用，如何修复它
- 在页面加载时显示 css(如果已选中）
- 如果父宽度大于特定值，则css应用样式
- 如果使用css，则地图不显示“;calc”;
- Internet Explorer CSS类样式没有'如果存在具有相同类名的其他元素，则不适用
- jquery 如果 CSS 高度> Xpx 执行此操作
- 如果css(）==X，则else不工作，窗体不工作
- 如果css/jquery为空，则隐藏列表元素
- 如果css("top")大于等于-70(负值)
- jQuery position方法，如果CSS位置稍后被设置为静态以外的任何内容，则返回不同的值
- 检测与JavaScript或jQuery如果CSS转换2D是可用的
- 如果CSS文件的属性被禁用，图像会被下载吗?
- 使用yepno，我怎么知道如果css资源被成功加载
- 如果css有样式，则为元素添加addClass
- 如果CSS具有特定值，请不要执行jQuery脚本
