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

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

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

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #input #function #button #html #action

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍使用JavaScript实现网页中复选框全选功能的方法，包括全选页面内所有复选框、全选同名复选框及具有相同前缀名的复选框。

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

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

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

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

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

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

<html>

<head>

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

<title>全选示例</title>

</head>

<body>

<form action="" method="post" name="loginForm">

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

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

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

<input type="checkbox" name="fruit" value="2">梨<br>

<input type="checkbox" name="fruit" value="3">桃<br>

<input type=button value="全选水果" onclick="checkAllFruit()">

<input type=button value="取消全选水果" onclick="unCheckAllFruit()"><br>

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

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

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

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

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

<input type="checkbox" name="_fruit2" value="7">梨<br>

<input type="checkbox" name="_fruit3" value="8">桃<br>

<input type=button value="全选水果2" onclick="checkAllFruit2()">

<input type=button value="取消全选水果2" onclick="unCheckAllFruit2()"><br>

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

<input type=button value="所有全选" onclick="checkAll()">

<input type=button value="取消所有全选" onclick="unCheckAll()">

</form>

</body>

</html>

<Script language="JavaScript">

function checkAll()

{

var objs = document.getElementsByTagName("input");

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

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

objs[i].checked = true;

}

}

function checkAllFruit()

{

var objs = document.getElementsByTagName("input");

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

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

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

objs[i].checked = true;

}

}

function checkAllFruit2()

{

var objs = document.getElementsByTagName("input");

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

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

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

{

objs[i].checked = true;

}

}

}

function unCheckAll()

{

var objs = document.getElementsByTagName("input");

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

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

objs[i].checked = false;

}

}

function unCheckAllFruit()

{

var objs = document.getElementsByTagName("input");

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

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

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

objs[i].checked = false;

}

}

function unCheckAllFruit2()

{

var objs = document.getElementsByTagName("input");

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

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

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

objs[i].checked = false;

}

}

function doChangeCheckStatus(obj)

{

if(obj.checked==true)

{

checkAll();

}

else

{

unCheckAll();

}

}

</script>

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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