采用JAVASCRIPT实现全选的三种情况

最新推荐文章于 2025-02-07 17:08:00 发布

最新推荐文章于 2025-02-07 17:08:00 发布 · 94 阅读

·

0

·

文章标签：

#JavaScript #HTML #ViewUI

本文通过实例演示了使用JavaScript实现页面元素全选的功能，包括全选同名复选框、全选具有相同前缀名的复选框等，并提供了完整的源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况：

1、当前页面中所有的CHECKBOX全部选中及取消。

2、当前页面中所有同名的CHECKBOX全部选中。

3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。

这里以实例的形式，展示了三种情况的操作，完整源代码如下：

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<title>全选示例</title>

</head>

<body>

<formaction=""method="post"name="loginForm">

/********************全选示例********************/<br>

<b>水果（checkbox同名）：</b><br>

<inputtype="checkbox"name="fruit"value="1">苹果<br>

<inputtype="checkbox"name="fruit"value="2">梨<br>

<inputtype="checkbox"name="fruit"value="3">桃<br>

<inputtype=buttonvalue="全选水果"onclick="checkAllFruit()">

<inputtype=buttonvalue="取消全选水果"onclick="unCheckAllFruit()"><br>

<b>蔬菜：</b><br>

<inputtype="checkbox"name="vegetable"value="4">大白菜<br>

<inputtype="checkbox"name="vegetable"value="5">西红柿<br>

<b>水果2（checkbox不同名，具有相同的前缀名）：</b><br>

<inputtype="checkbox"name="_fruit1"value="6">苹果<br>

<inputtype="checkbox"name="_fruit2"value="7">梨<br>

<inputtype="checkbox"name="_fruit3"value="8">桃<br>

<inputtype=buttonvalue="全选水果2"onclick="checkAllFruit2()">

<inputtype=buttonvalue="取消全选水果2"onclick="unCheckAllFruit2()"><br>

<inputtype="checkbox"name="vegetable"onclick="doChangeCheckStatus(this);">全选

<inputtype=buttonvalue="所有全选"onclick="checkAll()">

<inputtype=buttonvalue="取消所有全选"onclick="unCheckAll()">

</form>

</body>

</html>

<Scriptlanguage="JavaScript">...

functioncheckAll()

...{

varobjs=document.getElementsByTagName("input");

for(vari=0;i<objs.length;i++)...{

if(objs[i].type.toLowerCase()=="checkbox")

objs[i].checked=true;

}

}

functioncheckAllFruit()

...{

varobjs=document.getElementsByTagName("input");

for(vari=0;i<objs.length;i++)...{

if(objs[i].type.toLowerCase()=="checkbox")

if(objs[i].name.toLowerCase()=="fruit")

objs[i].checked=true;

}

}

functioncheckAllFruit2()

...{

varobjs=document.getElementsByTagName("input");

for(vari=0;i<objs.length;i++)...{

if(objs[i].type.toLowerCase()=="checkbox")

if(objs[i].name.toLowerCase().substring(0,6)=="_fruit")

...{

objs[i].checked=true;

}

}

}

functionunCheckAll()

...{

varobjs=document.getElementsByTagName("input");

for(vari=0;i<objs.length;i++)...{

if(objs[i].type.toLowerCase()=="checkbox")

objs[i].checked=false;

}

}

functionunCheckAllFruit()

...{

varobjs=document.getElementsByTagName("input");

for(vari=0;i<objs.length;i++)...{

if(objs[i].type.toLowerCase()=="checkbox")

if(objs[i].name.toLowerCase()=="fruit")

objs[i].checked=false;

}

}

functionunCheckAllFruit2()

...{

varobjs=document.getElementsByTagName("input");

for(vari=0;i<objs.length;i++)...{

if(objs[i].type.toLowerCase()=="checkbox")

if(objs[i].name.toLowerCase().substring(0,6)=="_fruit")

objs[i].checked=false;

}

}

functiondoChangeCheckStatus(obj)

...{

if(obj.checked==true)

...{

checkAll();

}

else

...{

unCheckAll();

}

}

</script>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。