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