原问题:

<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"问题的更多相关文章

  1. Input:type属性

    1.button:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本). <input id="" type="button" name= ...

  2. js修改input的type属性问题(兼容所有浏览器,主要用于密码类的默认有提示文字的效果)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. 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 ...

  4. input的type属性的修改

    记录一下成长的历程吧! 刚开始写,没什么文笔,也没什么技术含量,可能主要的是纪录一下平常工作学习中遇到的问题,以及解决的办法吧.或者只有问题,没有解决办法. 前两天项目中遇到的一个问题,由于之前一直没 ...

  5. input的type属性

    input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...

  6. 【HTML5】input元素type属性值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)

    开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...

  8. type为number的<input>标签 type和size属性失效

    html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型. Firefox.ie9不支持

  9. HTML5学习笔记简明版(5):input的type超级类型

    HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...

随机推荐

  1. CentOS7中热插拔硬盘如何读取新的硬盘

    在服务器或虚拟机上,一般会实现热插拔硬盘.此时CentOS7是无法读到新盘的,所以需要重新扫描. 我们添加一个新的硬盘演示: [root@xuexi ~]# ls /dev/sd* //应该还有一个s ...

  2. PAGELATCH_EX Contention on 2:1:103

    This blog post is meant to help people troubleshoot page latch contention on 2:1:103. If that’s what ...

  3. JSOI2018R2题解

    D1T1:潜入行动 裸的树上DP.f[i][j][0/1][0/1]表示以i为根的子树放j个设备,根有没有放,根有没有被子树监听,的方案数.转移显然. #include<cstdio> # ...

  4. Codeforces.724G.Xor-matic Number of the Graph(线性基)

    题目链接 \(Description\) 给定一张带边权无向图.若存在u->v的一条路径使得经过边的边权异或和为s(边权计算多次),则称(u,v,s)为interesting triple(注意 ...

  5. [BZOJ4237]稻草人/[JOISC2014]かかし

    [BZOJ4237]稻草人/[JOISC2014]かかし 题目大意: 平面上\(n(n\le2\times10^5)\)个点,若一个矩形各边与坐标轴平行,左下角和右上角都在\(n\)个点之中,且内部不 ...

  6. Android 打包出现jdk版本错误的问题

    Android 打包出现 jdk 版本错误的问题,本质上是 SDK 的问题,与 JDK 无关.如果 SDK 的 API 是24或者更高,就要求 jdk 1.8,我这里指定的 API 是22,所以去勾选 ...

  7. Trie树 理解

    Trie树的理解 Trie树又称单词查找树,字典树,是哈希树的变种: 优点在于:最大限度地减少无谓的字符串比较,查询效率比哈希高: 缺点在于:空间消耗很大: 性质 其基本性质可以归纳为: 跟结点不包括 ...

  8. Codeforces Round #350 (Div. 2) E. Correct Bracket Sequence Editor 栈 链表

    E. Correct Bracket Sequence Editor 题目连接: http://www.codeforces.com/contest/670/problem/E Description ...

  9. ASP.NET 构建高性能网站 第1篇

    网站优化需要考虑的方面 在用ASP.NET开发网站的时候,性能是永远需要考虑和关注的问题,性能不仅仅只是程序代码执行时候的速度,而是涉及到方方面面的东西. 就拿ASP.NET的一个请求来讲,从浏览器向 ...

  10. 由最小生成树(MST)到并查集(UF)

    背景 最小生成树(Minimum Spanning Tree)的算法中,克鲁斯卡尔算法(Kruskal's algorithm)是一种常用算法. 在克鲁斯卡尔算法中的一个关键问题是如何判断图中的两个点 ...