javascript 全选 反选 ie 火狐兼容问题
我写了一个js的全选和反选的类,在ie中测试没有问题但是在火狐中就出现错误。源代码如下:<html><head><metahttp-equiv="Content-Type...
我写了一个js的全选和反选的类,在ie中测试没有问题但是在火狐中就出现错误。
源代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function CheckSel(AllCheckbox_id,Checkbox_name){ /*定义一个对象 CheckSel 三个参数分别是全选框定义的id复选框定义的id和单选框的名字*/
this.AllCheckbox=AllCheckbox_id; //这个对象的一个属性
this.Checkbox_name=Checkbox_name; //这个对象的一个属性
this.AllSelect=AllSelect; //这个对象的一个方法(全选)
this.UnSelect=UnSelect; //这个对象的一个方法(反选)
this.OnlySelect=OnlySelect; //这个对象的一个方法(单选)
}
function AllSelect() {//实现全选功能
CheckboxAll=document.getElementById(this.AllCheckbox);
Checkbox_names=document.getElementsByName(this.Checkbox_name)
for (var i=0;i<Checkbox_names.length;i++) {
Checkbox_names[i].checked = CheckboxAll.checked;
}
}
function UnSelect(){ //实现复选框功能
CheckboxAll=document.getElementById(this.AllCheckbox);
Checkbox_names=document.getElementsByName(this.Checkbox_name)
nj=0
for (var i=0;i<Checkbox_names.length;i++) {
if (Checkbox_names[i].checked){
Checkbox_names[i].checked = false;
}else
{
Checkbox_names[i].checked = true;
nj++;
}
}
if(nj==Checkbox_names.length){
CheckboxAll.checked=true;
}else{
CheckboxAll.checked=false;
}
}
function OnlySelect(){ //单选
var CheckboxAll;
CheckboxAll=document.getElementById(this.AllCheckbox);
//alert(this.AllCheckbox);
Checkbox_names=document.getElementsByName(this.Checkbox_name)
//alert(Checkbox_names.length);
var numOfChecked=0;
for(var i=0;i<Checkbox_names.length;i++){
if (Checkbox_names[i].checked){
alert(Checkbox_names[i].checked);
numOfChecked++;
}
}
if (numOfChecked==Checkbox_names.length){
CheckboxAll.checked=true;
}else{
CheckboxAll.checked=false;
}
}
</script>
<script language="javascript">
var selcheck = new CheckSel("AllC","check_box");/*新定义一个对象 selcheck 这个对象应该有上面CheckSel对象的所有的属性和方法 三个参数是id 和name 。
我的意思是以后每次 只定义一个新的对象就行 上面那段就写到一个js文件 这里只有这一句话就行*/
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input id="AllC" type="checkbox" name="chkall" value="checkbox" onClick="selcheck.AllSelect();" /><!--应用新对象selcheck的全选方法 -->
全选<br />
<input id="UnC" type="checkbox" name="unchkall" value="checkbox" onClick="selcheck.UnSelect();" />
反选<br />
<input type="checkbox" name="check_box" value="checkbox" onClick="selcheck.OnlySelect();" />
1<br />
<input type="checkbox" name="check_box" value="checkbox" onClick="selcheck.OnlySelect();" />
2
<br />
<input type="checkbox" name="check_box" value="checkbox" onClick="selcheck.OnlySelect();" />
3<br />
</label>
</form>
</body>
</html>
应该是Checkbox_names[i].checked 的问题 在火狐中测试输出结果总是 true 展开
源代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function CheckSel(AllCheckbox_id,Checkbox_name){ /*定义一个对象 CheckSel 三个参数分别是全选框定义的id复选框定义的id和单选框的名字*/
this.AllCheckbox=AllCheckbox_id; //这个对象的一个属性
this.Checkbox_name=Checkbox_name; //这个对象的一个属性
this.AllSelect=AllSelect; //这个对象的一个方法(全选)
this.UnSelect=UnSelect; //这个对象的一个方法(反选)
this.OnlySelect=OnlySelect; //这个对象的一个方法(单选)
}
function AllSelect() {//实现全选功能
CheckboxAll=document.getElementById(this.AllCheckbox);
Checkbox_names=document.getElementsByName(this.Checkbox_name)
for (var i=0;i<Checkbox_names.length;i++) {
Checkbox_names[i].checked = CheckboxAll.checked;
}
}
function UnSelect(){ //实现复选框功能
CheckboxAll=document.getElementById(this.AllCheckbox);
Checkbox_names=document.getElementsByName(this.Checkbox_name)
nj=0
for (var i=0;i<Checkbox_names.length;i++) {
if (Checkbox_names[i].checked){
Checkbox_names[i].checked = false;
}else
{
Checkbox_names[i].checked = true;
nj++;
}
}
if(nj==Checkbox_names.length){
CheckboxAll.checked=true;
}else{
CheckboxAll.checked=false;
}
}
function OnlySelect(){ //单选
var CheckboxAll;
CheckboxAll=document.getElementById(this.AllCheckbox);
//alert(this.AllCheckbox);
Checkbox_names=document.getElementsByName(this.Checkbox_name)
//alert(Checkbox_names.length);
var numOfChecked=0;
for(var i=0;i<Checkbox_names.length;i++){
if (Checkbox_names[i].checked){
alert(Checkbox_names[i].checked);
numOfChecked++;
}
}
if (numOfChecked==Checkbox_names.length){
CheckboxAll.checked=true;
}else{
CheckboxAll.checked=false;
}
}
</script>
<script language="javascript">
var selcheck = new CheckSel("AllC","check_box");/*新定义一个对象 selcheck 这个对象应该有上面CheckSel对象的所有的属性和方法 三个参数是id 和name 。
我的意思是以后每次 只定义一个新的对象就行 上面那段就写到一个js文件 这里只有这一句话就行*/
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input id="AllC" type="checkbox" name="chkall" value="checkbox" onClick="selcheck.AllSelect();" /><!--应用新对象selcheck的全选方法 -->
全选<br />
<input id="UnC" type="checkbox" name="unchkall" value="checkbox" onClick="selcheck.UnSelect();" />
反选<br />
<input type="checkbox" name="check_box" value="checkbox" onClick="selcheck.OnlySelect();" />
1<br />
<input type="checkbox" name="check_box" value="checkbox" onClick="selcheck.OnlySelect();" />
2
<br />
<input type="checkbox" name="check_box" value="checkbox" onClick="selcheck.OnlySelect();" />
3<br />
</label>
</form>
</body>
</html>
应该是Checkbox_names[i].checked 的问题 在火狐中测试输出结果总是 true 展开
展开全部
您好!很高兴为您答疑!
建议采用document.getElementsByName来获取一个数组,然后循环处理dom。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
建议采用document.getElementsByName来获取一个数组,然后循环处理dom。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
把function UnSelect()中的最后的同段代码
if(nj==Checkbox_names.length){
CheckboxAll.checked=true;
}else{
CheckboxAll.checked=false;
}
去掉就可以了
if(nj==Checkbox_names.length){
CheckboxAll.checked=true;
}else{
CheckboxAll.checked=false;
}
去掉就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你可以采用document.getElementsByName来获取一个数组,然后循环处理dom
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
参考 34、要做的事情总找得出时间和机会;不要做的事情总找的出藉口。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
这种问题以后会碰到很多,JS的话用框架做,人家都帮你做好兼容了
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询