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后面也不是明智之举,如果涉及到隐藏的情况的话就会影响到获取值。

 

posted @   古兰精  阅读(1558)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示