采用JAVASCRIPT实现全选的三种情况【收集】

最新推荐文章于 2022-08-30 18:30:28 发布
最新推荐文章于 2022-08-30 18:30:28 发布
阅读量871 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript input button action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/heimirror/article/details/2291349
本文介绍使用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>

 

 

heimirror
关注
JavaScript实现全选
only_musm的博客
03-13 1619
&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;//复选框的全选function checkAll(){    var chec = document.getElementById("checkall").checked;//复选框是否选中，选中为true，没选中则为false    var likes = document...
javascript实现全选全不选
04-20
NULL 博文链接：https://sylqy.iteye.com/blog/1894273
【JavaScript】-- 利用JS实现全选/取消全选
qq_48802092的博客
08-30 3345
实现要求： 点击"全选"框，以下所有选项全部勾选。 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。 当其他复选框全部选中，"全选框"为选中状态。 当其他复选框有一个未选中，"全选框"取消选中状态。...
乘法表.php
Vivian_shuang的博客
08-15 543
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
js表单元素checked、radio被选中的几种方式-遁地龙卷风
u011927449的博客
07-03 493
0.环境 　　<input type="checkbox" value="lol"/>lol 　　var lol = document.getElementsByTagName("input")[0]; 1.HTML DOM 　　a.lol.checked = true; 　　　　属性的值可以不是lol，只要转为布尔值的时候为true就可以，取值时只有true、false两种　　 　　　　不会增加checked标记 　　b.lol.click(); 　　　　不会增加checked标记，这时lo.
jquery实现checkbox 全选/全不选的通用写法
10-26
函数首先获取触发事件的复选框的name属性，然后遍历所有与之匹配的复选框，通过设置`checked`属性来实现全选或全不选的效果。这里采用了兼容性更好的通用写法，即使用`each`循环遍历并直接操作`checked`属性，而不是...
jQuery实现checkbox全选反选功能的精简代码
精简写法”，这表明文档将介绍如何使用jQuery技术实现复选框（checkbox）的全选、反选和取消全选功能，并且会采用一种简洁的方式编写代码来完成这些功能。 #### 描述说明 描述部分给出了实现这些功能的一些代码片段...
js采用map取到id集合组并且实现点击一行选中一行
10-26
同时，如果要实现全选功能，只需处理全选复选框的事件，并适当调整其他复选框的状态和表格行的样式即可。这样的实现方式广泛适用于动态表格数据管理，比如在后台管理系统中处理数据记录的选中与操作。
决策报表内加入两个普通报表，这两个普通报表怎么用JS实现复选按钮控件全选和批量操作
最新发布
08-07
因此，我们可以这样实现全选： 决策报表中的全选按钮的点击事件： function selectAll() { // 第一个报表 var iframe1 = document.getElementById("iframe1"); var innerFR1 = iframe1.contentWindow.FR; ...
字符串的截取和全选并删除 讲解及代码
07-21
通过上述示例代码，我们可以看到字符串的截取以及全选并删除功能的具体实现方式。这些功能不仅可以提升用户的使用体验，还能简化页面的设计，使整个系统更加高效易用。开发者可以根据实际情况调整代码细节，以适应...
Html+JS实现全选与非全选操作
Blog Bingo
08-01 7859
Html+JS；全选与非全选
如何用Javascript实现全选和单选
KevinMiGuan的博客
09-19 3899
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; table th, table td{bord
利用Javascript实现全选和全不选
mover999的博客
09-30 7893
最近开始练习js的基本操作，常常因为一些小疏忽导致页面效果无法实现。这篇博客中我来总结一下如何js实现全选和全不选。 1.首先你需要了解input标签中复选框。当该复选框被选中时，调用该元素checked属性的值为true。这一点是我们利用js实现该效果的第一个要点。 2.全选：当鼠标点击全选这个复选框时，调用函数allSelet().使用for循环遍历每一个需要被选中的input元素（我们它...
采用JAVASCRIPT实现全选的三种情况
JAVA天地
02-20 94
通常采用JAVASCRIPT实现页面全选的，主要有下面三种情况： 1、 当前页面中所有的CHECKBOX全部选中 及取消 。 2、 当前页面中所有同名的CHECKBOX全部选中。 3、当前页面中所有具有相同前缀名的CHECKBOX全部选中。 这里以实例的形式，展示了三种情况的操作，完整源代码如下： &lt;html&gt;&lt;head&gt;&lt;metah...
【小河今学 | JavaScript】实现选择水果效果
LB_laber的博客
08-07 1024
实现选择水果效果
使用JavaScript实现全选（全不选）按钮
qq_41586079的博客
10-18 7861
有如下案例，使用JavaScript实现全选（全不选）按钮。 这个按钮在实际开发中也是很常用的，我就把我的源码附上 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多选框练习&lt;/title&gt;
如何通过按钮来控制checkbox选中还是不被选中
qq_19551571的博客
10-09 1225
如何通过按钮来控制checkbox选中还是不被选中
使用JavaScript实现全选，全不选和反选
u_u2020的博客
05-09 2751
1使用JavaScript实现全选，全不选和反选 先写出它的布局，首先我们给他一个div来装所要写的内容，再在大的div里面放两个div和三个button按钮，button按钮就是用来放全选，全不选和反选的，第一个div是用来放标题的(选择爱好：)，而第二个div是用来放选择框和选项的，里面的选择框我们是用input标签来实...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值