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="0"/><b></b>所有用户
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="userOrgObj_checkbox" class="checkbox-blue" value="1" checked="checked"/> <b></b>组织机构
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="assignUserObj_checkbox" class="checkbox-blue" value="2" 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 "0":
            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 "1":
            if(state){
                $("#allExecute").val("false");
                $("#orgInTr").show();
                $("#orgOutTr").hide();
                $("#out-checkbox input").eq(0).prop("checked",false);
                $("#out-checkbox input").eq(0).prop("disabled","disabled");
                $("#out-checkbox input").eq(0).toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
                    
                $("#userAll").prop("checked",false);
               }else{
                   $("#out-checkbox input").eq(0).removeAttr("disabled");
                $("#out-checkbox input").eq(0).toggleClass("checkbox-blue",true).toggleClass("checkbox-disable",false);
                    
                $("#orgInTr").hide();
               }
            break;
        case "2":
             if(state){
                $("#allExecute").val("false");
               $("#userInTr").show();
               $("#userOutTr").hide();
               $("#out-checkbox input").eq(1).prop("checked",false);
               $("#out-checkbox input").eq(1).prop("disabled","disabled");
                $("#out-checkbox input").eq(1).toggleClass("checkbox-blue",false).toggleClass("checkbox-disable",true);
                    
               $("#userAll").prop("checked",false);
             }else{
                 $("#out-checkbox input").eq(1).removeAttr("disabled");
                $("#out-checkbox input").eq(1).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="0"/><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="1" checked="checked"/> <b></b>组织机构
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="assignUserObj_checkbox" class="checkbox-blue" value="2" 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="0">                <!-- IE下弹0，input框不选中 -->
        <input type="checkbox" value="2"></input>      <!-- 谷歌火狐下弹2，input框选中 -->
    </label>
    <label>编辑
        <input type="hidden" value="1">                <!-- IE下弹1，input框不选中 -->
        <input type="checkbox" value="3"></input>      <!-- 谷歌火狐下弹3，input框选中 -->
    </label>
</a>
</body>
</html>

　　hidden类型放于下面IE下即可正常。

补充：

　　需要注意一点的是：当隐藏域放在隐藏的元素里时，哪怕根据id去获取隐藏域的值，也是获取不到的，所以需要将隐藏域放到隐藏的元素外面。所以将隐藏域放在显示的input后面也不是明智之举，如果涉及到隐藏的情况的话就会影响到获取值。

 

转载于:https://www.cnblogs.com/goloving/p/7160814.html