IE浏览器无法直接识别input的type="hidden"问题
原问题:
<td class="formValue" id="in-checkbox">
<label class="checkbox-inline">
<input type="hidden" name="allUserObj.execute" value="" id="allExecute"/>
//type=“hidden”在前面,IE无法识别hidden类型,导致每次点击都是取它的值
<input type="checkbox" id="userAll" class="checkbox-blue" value=""/><b></b>所有用户
</label>
<label class="checkbox-inline">
<input type="checkbox" id="userOrgObj_checkbox" class="checkbox-blue" value="" checked="checked"/> <b></b>组织机构
</label>
<label class="checkbox-inline">
<input type="checkbox" id="assignUserObj_checkbox" class="checkbox-blue" value="" checked="checked"/><b></b>自定义用户
</label>
</td>
/*执行复选框勾选逻辑*/
$("#in-checkbox input").each(function(){
$(this).on("click",function(){
var state=$(this).prop("checked");
var type=$(this).val();
switch (type) {
case "":
if(state){
$("#in-checkbox input").prop("checked",false);
$("#in-checkbox input").prop("disabled","disabled");
$("#in-checkbox input").toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
$("#out-checkbox input").removeAttr("disabled");
$("#out-checkbox input").toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
$("#executeTr .contents").hide();
$(this).prop("checked",true);
$(this).removeAttr("disabled");
$(this).prev().removeAttr("disabled");
$(this).toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
$("#allExecute").val("true");
}else{
$("#in-checkbox input").prop("checked",true);
$("#in-checkbox input").removeAttr("disabled");
$("#in-checkbox input").toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
$("#out-checkbox input").prop("checked",false);
$("#out-checkbox input").prop("disabled","disabled");
$("#out-checkbox input").toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
$("#executeTr .contents").show();
$("#notExecuteTr .contents").hide();
$(this).prop("checked",false);
$("#allExecute").val("false");
}
break;
case "":
if(state){
$("#allExecute").val("false");
$("#orgInTr").show();
$("#orgOutTr").hide();
$("#out-checkbox input").eq().prop("checked",false);
$("#out-checkbox input").eq().prop("disabled","disabled");
$("#out-checkbox input").eq().toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true); $("#userAll").prop("checked",false);
}else{
$("#out-checkbox input").eq().removeAttr("disabled");
$("#out-checkbox input").eq().toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false); $("#orgInTr").hide();
}
break;
case "":
if(state){
$("#allExecute").val("false");
$("#userInTr").show();
$("#userOutTr").hide();
$("#out-checkbox input").eq().prop("checked",false);
$("#out-checkbox input").eq().prop("disabled","disabled");
$("#out-checkbox input").eq().toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true); $("#userAll").prop("checked",false);
}else{
$("#out-checkbox input").eq().removeAttr("disabled");
$("#out-checkbox input").eq().toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false); $("#userInTr").hide();
}
break;
default:
break;
}
});
});
在IE下点击第一个所有对象不起效果,原因就在于IE无法识别hidden类型导致点击的时候总是先取hidden类型的值,所以var type=$(this).val();始终为空。而其他浏览器可以识别hidden类型,所以没有问题。
解决方式:将隐藏域hidden类型放到后面即可。
<td class="formValue" id="in-checkbox">
<label class="checkbox-inline">
<input type="checkbox" id="userAll" class="checkbox-blue" value=""/><b></b>所有用户
<input type="hidden" name="allUserObj.execute" value="" id="allExecute"/>//放到后面即可
</label>
<label class="checkbox-inline">
<input type="checkbox" id="userOrgObj_checkbox" class="checkbox-blue" value="" checked="checked"/> <b></b>组织机构
</label>
<label class="checkbox-inline">
<input type="checkbox" id="assignUserObj_checkbox" class="checkbox-blue" value="" checked="checked"/><b></b>自定义用户
</label>
</td>
自己写段代码测试下:
<html>
<head>
<meta charset="utf-8">
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('#preview input').click(function(){
var menu_id = $(this).val();
confirm(menu_id);
})
})
</script>
</head>
<body>
<a id="preview" href="javascript:void(0)">
<label>预览
<input type="hidden" value=""> <!-- IE下弹0,input框不选中 -->
<input type="checkbox" value=""></input> <!-- 谷歌火狐下弹2,input框选中 -->
</label>
<label>编辑
<input type="hidden" value=""> <!-- IE下弹1,input框不选中 -->
<input type="checkbox" value=""></input> <!-- 谷歌火狐下弹3,input框选中 -->
</label>
</a>
</body>
</html>
hidden类型放于下面IE下即可正常。
补充:
需要注意一点的是:当隐藏域放在隐藏的元素里时,哪怕根据id去获取隐藏域的值,也是获取不到的,所以需要将隐藏域放到隐藏的元素外面。所以将隐藏域放在显示的input后面也不是明智之举,如果涉及到隐藏的情况的话就会影响到获取值。
IE浏览器无法直接识别input的type="hidden"问题的更多相关文章
- Input:type属性
1.button:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本). <input id="" type="button" name= ...
- js修改input的type属性问题(兼容所有浏览器,主要用于密码类的默认有提示文字的效果)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- select2取值报错,Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.
用到了 select2 组件来多选收件人,用搜狗浏览器(6.2版高速模式)在执行到如下这句时报错(Uncaught InvalidStateError: Failed to read the 'sel ...
- input的type属性的修改
记录一下成长的历程吧! 刚开始写,没什么文笔,也没什么技术含量,可能主要的是纪录一下平常工作学习中遇到的问题,以及解决的办法吧.或者只有问题,没有解决办法. 前两天项目中遇到的一个问题,由于之前一直没 ...
- input的type属性
input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...
- 【HTML5】input元素type属性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)
开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...
- type为number的<input>标签 type和size属性失效
html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型. Firefox.ie9不支持
- HTML5学习笔记简明版(5):input的type超级类型
HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...
随机推荐
- mysql高性能索引
独立索引: 独立索引是指索引列不能是表达式的一部分,也不能是函数的参数 例1: SELECT actor_id FROM actor WHERE actor_id+1=5 --这种写法,就算在acto ...
- 课堂练习—hash
课堂练习-hash 要求: 利用除留余数法为下列关键字集合的存储设计hash函数,并画出分别用开放寻址法和拉链法解决冲突得到的空间存储状态(散列因子取0.75) 关键字集合:85,75,57,60,6 ...
- 鸟哥的私房菜:Bash shell(二)-变量的丰富功能
一 Shell变量的取用与设定,变量规则 由于系统需要一些变量来提供他数据的存取,所以就有一些所谓的『环境变量』 需要来读入系统中了!这些环境变量例如 PATH.HOME.MAIL.SHELL.为了 ...
- bzoj 1047 单调队列
做4次单调队列优化DP. /************************************************************** Problem: 1047 User: idy ...
- codevs 1063 合并果子 STL 优先队列
1063 合并果子 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codevs.cn/problem/1063/ Description 在一 ...
- Tomcat启动异常 java.net.BindException: Cannot assign requested address: JVM_Bind
从Apache官网下载的tomcat7,在MyEclipse中启动时抛出如下异常: 严重: StandardServer.await: create[localhost:8005]: java.net ...
- OS X 10.10.4系统,命名为“Yosemite”(优胜美地)
新版OS X 10.10.4系统,命名为“Yosemite”(优胜美地),拥有全新的界面设计及一些功能更新,下面一起来了解一下. 一.界面扁平化.进一步融入iOS功能 首先,OS X 10.10 Yo ...
- Running multiple instances of Xamarin Studio on a Mac
I love developing software on my MacBook Air! I got the latest version with the maximum possible spe ...
- nginx做TCP代理实现群集
nginx做TCP代理实现群集 nginx从版本1.9开始,既能做HTTP代理,又能做TCP代理,这就非常完美了. 配置nginx.conf. 为了简单起见,笔者故意去掉了HTTP代理配置部分,只保留 ...
- Android跳转各种系统设置界面-总结
来自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0921/8536.html View btn1 = this.findVi ...