IE中checkbox在刷新后初始化的问题

初一看这个功能很简单，一个checkbox，加一段脚本，把这个checkbox的checked属性设为false。


代码如下:

<input type="checkbox" id="chk_UnInital" name="chk_UnInital" />
<script>document.getElementById("chk_UnInital").checked=false;</script>

这段代码在firefox等其它浏览器中都能实现这个需求，维独在IE中死活不行，每次把勾勾上，无论是刷新还是后退，这个勾都是勾上的。
难道是在IE下这段代码没工作？
验证一下，在这段脚本前后各加一个alert，发现在执行这checked=false之前和之后这个checkbox都是未选中的，当把警告框确定后，这个勾反而出现了！
这说明在后面的页面加载顺序中，某个事件又把这个checkbox设为true了，先试着在页面onload里再执行这段脚本


代码如下:

<script>
window.onload=function(){
　　alert("before");
　　document.getElementById("chk_UnInital").checked=false;
}
</script>

果然发现在执行alert("before");时这个勾是选中的，这说明在onload事件之前这个勾就被浏览器自动选上了，具体是什么原因就涉及到IE内部的机制了。
将这个function注册在onload事件里，到这里这个需求就实现了。
然而onload是在页面所有的元素都加载完后才会执行，在本地测试的时候有一个请求返回很慢，从而使onload事件迟迟不能执行，这是我们不愿意看到的。
后来发现网站上另一处checkbox在页面刷新时不会保存之前的状态，经过仔细对比之后发现这个input多了一个checked=""属性：
<input type="checkbox" id="chk_Inital" name="chk_Inital" checked="" />
有了这个属性后，事件不用放在onload里也能起作用了
这是什么原因呢？
接着做以下试验：


代码如下:

<input type="checkbox" id="chk_UnInital" name="chk_UnInital" />
<label for="chk_UnInital">This checkbox can't be Inital</label>
<br>
<input type="checkbox" id="chk_Inital" name="chk_Inital" checked=""/>
<label for="chk_Inital">This checkbox can be inital</label>
<br>
<script>
//window.onload=function(){
var chks=document.getElementsByTagName("input");
for(var i=0,l=chks.length;i<l;i++){
　　alert(chks[i].id);
　　chks[i].checked=false;
}
//}
</script>

为了便于叙述，我们这里将上面这段脚本的执行时间称为t1，window.onload的执行时间称为t3，这之间的执行时间称为t2
通过加入alert后，对比发现：
　　　　　　chk_UnInital　　chk_Inital
脚本放在script块中执行：
t1之前　　　　未选中　　　　　　选中
t1之后　　　　选中　　　　　　未选中
下面是放在onload中执行：
t3之前　　　　选中　　　　　　　选中
t3之后　　　　未选中　　　　　　未选中
发现加checked=""后在t1之前即为选中状态，然后被t1置为unchecked。
总结：
方案一：在onload事件里处理
方案二：加上checked属性

New Document

This checkbox can't be Inital

This checkbox can be inital

Click this link and then forward,see the two checkbox status

//window.onload=function(){
var chks=document.getElementsByTagName("input");
for(var i=0,l=chks.length;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • IE中checkbox在刷新后初始化的问题

    初一看这个功能很简单,一个checkbox,加一段脚本,把这个checkbox的checked属性设为false. 复制代码 代码如下: <input type="checkbox" id="chk_UnInital" name="chk_UnInital" /> <script>document.getElementById("chk_UnInital").checked=false;</scr

  • 解决vuex数据页面刷新后初始化操作

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

  • vue3动态路由刷新后空白或者404问题的解决

    目录 前言 实现 登出页面需要清除缓存 排错过程 总结 前言 之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~ 之前用的组件版本不知道了,回退也不知道哪个版本合适,就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0",ant-design-vue": "

  • Vue刷新后页面数据丢失问题的解决过程

    目录 一.为什么刷新后数据会丢失 二.解决思路 三.解决方法 四.总结 总结 一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失.因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值. 二.解决思路 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage.localStorage.cookie) 办法二:在页面刷新的时候再次请求远

  • ExtJS 刷新后如何默认选中刷新前最后一次选中的节点

    在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点.这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上. 查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点. 完成的代码如下: 首先是extjs3.x版本中的方法: 复制代码 代码如下: //获取选中的节点 var node = tre

  • asp.net中Timer无刷新定时器的实现方法

    本文实例讲述了asp.net中Timer无刷新定时器的实现方法.Timer控件要实现无刷新,得用到ajax技术,这里使用VS2008自带的ajax技术.    首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: 一.前台代码如下: <form id="form1" runat="server"> <asp:ScriptManager ID="

  • Angular懒加载机制刷新后无法回退的快速解决方法

    Angular懒加载机制刷新后无法回退的快速解决方法

    今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码. angular懒加载机制刷新后无法回退的解决方案 : 通过查看angular(ionic)的源码发现$browser这个服务上有个on

  • PHP中CheckBox多选框上传失败的代码写法

    用惯Java和其他语言的时候,表单上传只需要checkbox的name相同的时候就可以上传了 <input type="checkbox" name="checkbox" value="1"> 选项 <input type="checkbox" name="checkbox" value="2"> 选项 <input type="checkbox&

  • C#中结构(struct)的部分初始化和完全初始化实例分析

    本文实例分析了C#中结构(struct)的部分初始化和完全初始化,分享给大家供大家参考.具体分析如下: 假设有这样一个值类型struct,如下所示: public struct Size { public int Length; public int Width; public int Area() { return Length*Width; } } 一.客户端,给所有struct字段初始化后调用方法 class Program { static void Main(string[] args

随机推荐