原问题:

<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. 分分钟搞定Python之排序与列表

    排序时程序中用得比较多的方法了.在Python中,最简单的排序方法摸过与使用内置的sorted(list)这个函数了,该函数一一个列表作为参数返回一个新的列表,只不过是把旧列表中的元素排过序了.原列表 ...

  2. [NOI2018]你的名字(SAM+线段树合并)

    考虑l=1,r=n的68分,对S和T建SAM,对T的SAM上的每个节点,计算它能给答案带来多少贡献. T上节点x代表的本质不同的子串数为mx[x]-mx[fa[x]],然后需要去掉所代表子串与S的最长 ...

  3. ST-PUZZLE-2.0(一个益智游戏)

    注:未经博主允许不得转载. 原文链接:http://www.cnblogs.com/Blog-of-Eden/p/9060300.html 和 https://i-m-eden.github.io/2 ...

  4. 【贪心】Codeforces Round #480 (Div. 2) C. Posterized

    题意:让你对[0,255]这个序列任意划分成一些不重叠的子段,每个子段的大小不超过K.给你n个不超过255的数,让你将每个数替换成它所在子段的任意一个元素,使得最终这个n个数的序列的字典序最小. p[ ...

  5. 【ZOJ】3740:Water Level【DP】

    Water Level Time Limit: 2 Seconds      Memory Limit: 65536 KB Hangzhou is a beautiful city, especial ...

  6. CF980E The Number Games【树链剖分/线段树】

    CF980E The Number Games 题意翻译 Panel 国将举办名为数字游戏的年度表演.每个省派出一名选手. 国家有 n 个编号从 1 到 n 的省,每个省刚好有一条路径将其与其他省相连 ...

  7. Codeforces Round #350 (Div. 2) A. Holidays 水题

    A. Holidays 题目连接: http://www.codeforces.com/contest/670/problem/A Description On the planet Mars a y ...

  8. C# 7.0特性与vs2017

    下面是关于在C#7.0语言中计划功能的说明.其中大部分功能在Visual Studio “15” Preview 4中能运行.现在是最好的试用时期,请记录下你们的想法. C#7.0语言增加了许多的新功 ...

  9. flex socket policy

    @ flex的as3代码是具备使用origin tcp socket通信能力的. @ 如果是flex builder本机调试,那么可以直连tcp的server. @ 如果flex发布在webserve ...

  10. PostgreSQL教程收集(中文文档/命令行工具/常用命令)

    http://www.postgres.cn/docs/9.6/index.html(中文文档) https://www.postgresql.org/docs/10/static/auth-meth ...