在线求助怎么解决这个浏览器不兼容问题
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>一级菜单1</title>
<script>
function selectCheck(){
}
//选中孩子
function selectChild(o){
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得子菜单的tr
var otrmenu = otr.nextSibling;
//遍历子菜单的checkbox
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = o.checked;
}
}
}
//选中父类(适用二级)
function selectParent(o){
//t=true默认找到
var t= false;
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得父菜单的tr
var otrmenu = otr.previousSibling;
//遍历子菜单的checkbox,验证是有选
for(var i=0;i<otr.all.length;i++) {
if(otr.all[i].type=="checkbox" && otr.all[i].checked){
t = true;
break;
}
}
//设置父类的checkbox状态
if(t){
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "checked";
selectRoot(otrmenu.all[i]);
break;
}
}
}else{
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "";
selectRoot(otrmenu.all[i]);
break;
}
}
}
}
//选中根点节(适用一级)
function selectRoot(o){
//t=true默认找到
var t= false;
//获得本菜单的tr
var otr = o.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
//获得父菜单的tr
var otrmenu = otr.previousSibling;
//遍历子菜单的checkbox,验证是否全选
for(var i=0;i<otr.all.length;i++) {
if(otr.all[i].type=="checkbox" && otr.all[i].checked){
t = true;
break;
}
}
//设置父类的checkbox状态
if(t){
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "checked";
break;
}
}
}else{
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "";
break;
}
}
}
}
//菜单的显示与隐藏
function setDisplay(o){
if(o.style.display==""){
o.style.display="none";
}else{
o.style.display="";
}
}
</script>
</head>
<body>
<table>
<tr>
<td ><input type="checkbox" name="m1" onclick="selectChild(this);" ><span onclick="setDisplay(m1_menu);" style="cursor: hand">一级菜单1</span></td>
</tr>
<tr id="m1_menu" style="">
<td>
<table>
<tr>
<td> <input type="checkbox" name="m11" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m11_menu);" style="cursor: hand">二级菜单1</span></td>
</tr>
<tr id="m11_menu">
<td>
<input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单1</a><br>
<input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单2</a><br>
<input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单3</a><br>
</td>
</tr>
<tr>
<td> <input type="checkbox" name="m12" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m12_menu);" style="cursor: hand">二级菜单2</span></td>
</tr>
<tr id="m12_menu">
<td>
<input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单4</a><br>
<input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单5</a><br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="checkbox" name="m2">一级菜单2</td>
</tr>
<tr id="m2_menu">
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="m3">一级菜单3</td>
</tr>
<tr id="m3_menu">
<td></td>
</tr>
</table></body>
</html>
在IE上可以实现checkbox选中不选中操作,但是在chrome中就不行,firefox也不行,求大神,在线等,我对javascript不是很了解 --------------------编程问答-------------------- 自己顶一下吧,明天看看 --------------------编程问答-------------------- --------------------编程问答-------------------- 0.0没人 --------------------编程问答-------------------- 1、parentElement 是IE的,firefox的是parentNode
2、previousSibling是IE的,firefox的是previousElementSibling
3、nextSibling是IE的,firefox的是nextElementSibling
可以看下这个帖子的说明
http://frieboy168.blog.163.com/blog/static/3554449120113145174866/
http://blog.csdn.net/zhouyong0/article/details/6371253
里面介绍了一些标准的写法,你可以根据这个修改下你的这个代码(我试过了,貌似不兼容,也没有太多时间去尝试)
JS里面你可以这样写 var otrmenu = otr.nextSibling || otr.nextElementSibling;
这个可以参考下面的帖子看看
http://www.jb51.net/article/4338.htm
最好的办法是用jquery等的去重构一下你的这个,那样的话兼容性就不用你去关注了。
--------------------编程问答--------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.js"></script>
<title>一级菜单1</title>
<script>
function selectCheck(){
}
//选中孩子
function selectChild(o){
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得子菜单的tr
var checkboxArray = $(otr).next().find("input:checkbox");
//遍历子菜单的checkbox
for(var i=0;i<checkboxArray.length;i++) {
checkboxArray[i].checked = o.checked;
}
}
//选中父类(适用二级)
function selectParent(o){
//t=true默认找到
var t= false;
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得父菜单的tr
var otrmenu = otr.previousSibling;
//遍历子菜单的checkbox,验证是有选
for(var i=0;i<otr.all.length;i++) {
if(otr.all[i].type=="checkbox" && otr.all[i].checked){
t = true;
break;
}
}
//设置父类的checkbox状态
if(t){
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "checked";
selectRoot(otrmenu.all[i]);
break;
}
}
}else{
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "";
selectRoot(otrmenu.all[i]);
break;
}
}
}
}
//选中根点节(适用一级)
function selectRoot(o){
//t=true默认找到
var t= false;
//获得本菜单的tr
var otr = o.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
//获得父菜单的tr
var otrmenu = otr.previousSibling;
//遍历子菜单的checkbox,验证是否全选
for(var i=0;i<otr.all.length;i++) {
if(otr.all[i].type=="checkbox" && otr.all[i].checked){
t = true;
break;
}
}
//设置父类的checkbox状态
if(t){
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "checked";
break;
}
}
}else{
for(var i=0;i<otrmenu.all.length;i++) {
if(otrmenu.all[i].type=="checkbox"){
otrmenu.all[i].checked = "";
break;
}
}
}
}
//菜单的显示与隐藏
function setDisplay(o){
if(o.style.display==""){
o.style.display="none";
}else{
o.style.display="";
}
}
</script>
</head>
<body>
<table>
<tr>
<td ><input type="checkbox" name="m1" onclick="selectChild(this);" ><span onclick="setDisplay(m1_menu);" style="cursor: hand">一级菜单1</span></td>
</tr>
<tr id="m1_menu" style="">
<td>
<table>
<tr>
<td> <input type="checkbox" name="m11" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m11_menu);" style="cursor: hand">二级菜单1</span></td>
</tr>
<tr id="m11_menu">
<td>
<input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单1</a><br>
<input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单2</a><br>
<input type="checkbox" name="m11_chk" onclick="selectParent(this);"><a href="#">易做图菜单3</a><br>
</td>
</tr>
<tr>
<td> <input type="checkbox" name="m12" onclick="selectChild(this);selectRoot(this);"><span onclick="setDisplay(m12_menu);" style="cursor: hand">二级菜单2</span></td>
</tr>
<tr id="m12_menu">
<td>
<input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单4</a><br>
<input type="checkbox" name="m12_chk" onclick="selectParent(this);"><a href="#">易做图菜单5</a><br>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><input type="checkbox" name="m2">一级菜单2</td>
</tr>
<tr id="m2_menu">
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="m3">一级菜单3</td>
</tr>
<tr id="m3_menu">
<td></td>
</tr>
</table></body>
</html>
用jquery可以解决这种问题 我只改了第一个方法,若想用,后面自己改撒。。都差不多
//选中孩子
function selectChild(o){
//获得本菜单的tr
var otr = o.parentElement.parentElement;
//获得子菜单的tr
var checkboxArray = $(otr).next().find("input:checkbox");
//遍历子菜单的checkbox
for(var i=0;i<checkboxArray.length;i++) {
checkboxArray[i].checked = o.checked;
}
}
补充:Java , Java EE