js 实现全选、全不选、反选功能

最新推荐文章于 2024-04-23 02:00:49 发布
最新推荐文章于 2024-04-23 02:00:49 发布
阅读量1.6w 收藏 4
点赞数 4
分类专栏： js 文章标签： input button xhtml html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wolinxuebin/article/details/7616101
版权
不多说，直接上代码，复制直接可以使用 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
function selectAllNullorReserve(obj,type){
   if(obj!=null&&obj!=""){
    if(document.getElementsByName(obj)!=undefined&&document.getElementsByName(obj).length>0){	//getElementsByName函数的作用按名字查找对象，返回一个数组。
     var userids = document.getElementsByName(obj);
     if(type=="全选"){
      for(var i=0;i<userids.length;i++){
       if(userids[i].checked == false){
        userids[i].checked = true;
       }
      }
     }else if(type=="全不选"){
      for(var i=0;i<userids.length;i++){
       if(userids[i].checked == true){
        userids[i].checked = false;
       }
      }
     }else if(type=="反选"){
      for(var i=0;i<userids.length;i++){
       if(userids[i].checked == true){
        userids[i].checked = false;
       }else{
        userids[i].checked = true;
       }
      }
     }
    }
   }  
}
</script>

<body>
<form>
<input name="userid" type="checkbox" value="1" />
    <input name="userid" type="checkbox" value="2" />
    <input name="userid" type="checkbox" value="3" />
    <input name="userid" type="checkbox" value="4" />
    <input name="userid" type="checkbox" value="5" />
    <input name="userid" type="checkbox" value="6" />
    <br />
    <input type="button" value="全选" οnclick="selectAllNullorReserve('userid','全选');" />
<br />
    <input type="button" value="全不选" οnclick="selectAllNullorReserve('userid','全不选');" />
    <br />
    <input type="button" value="反选" οnclick="selectAllNullorReserve('userid','反选');" />
</form>
</body>
</html>


林子木
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JS实现的全选、全不选及反选功能【案例】
10-17
主要介绍了JS实现的全选、全不选及反选功能,涉及javascript事件响应、元素遍历与属性动态操作相关实现技巧,需要的朋友可以参考下
Js实现复选框的全选、全不选反选功能代码实例
10-15
主要介绍了Js实现复选框的全选、全不选和反选,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1007
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
JS如何实现勾选全部复选框和不全选复选框
itclanCoder
02-01 4387
前言在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时，为了方便用户选中所有的复选框,网页界面会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢示例效果allcheckbox原生Js实现全选的效果,复选框是否被勾选,是由它的checked属性决定的,因此,实现本例效果的关键就是找到所有对应的复选框,然后将其它的checked属性设置...
JavaScript 实现全选、全不选和反选功能
不抛弃、不放弃：Aaron莫言
07-18 1522
需要实现全选，首先需要获取到表单元素，将所有复选框表单元素放到一个数组。因为id属性值是唯一的，所以通过name属性或者class属性获取元素比较合适。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同。反选遍历的时候判断如果checked值为true则改为false，checked值为false则改为true。的type属性为checkbox来创建多个复选框，input标签的type属性为button创建全选、全不选和反选按钮。
js一键全选/全不选
m0_74913905的博客
04-03 631
如何用js实现全选全不选
原生JS项目练习——全选与全不选和反选
周百万的博客
10-14 1341
一、主要功能介绍：1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）二、JS代码详细步骤解析：这不是重点，重点是学习原生JS。
JS实现全选反选全不选
06-18
JS实现全选反选全不选
js实现全选反选不选功能代码详解
10-17
主要介绍了js实现全选反选不选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于JavaScript实现全选、不选和反选效果
10-20
主要为大家详细介绍了基于JavaScript实现全选、不选和反选效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现全选和反选功能
weixin_51938823的博客
07-11 669
利用JS写了一个相对简单的全选和反选功能。
Layui与JavaScript复选框全选/全不选和单独选择功能：程序员成长之路上的问题与解决方案实战
juedaifenghua2的博客
04-20 1964
Layui与JavaScript复选框全选/全不选和单独选择功能：程序员成长之路上的问题与解决方案实战
JS实现全选全不选功能
qq_64037242的博客
04-15 398
1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中。
js全选，全部不选，反选
weixin_62980497的博客
09-22 101
input type="checkbox" id="cbox" value="" οnclick="check_inter()"/>请选择</br><input type="checkbox" name="inter" value="下棋"/>下棋</br><input type="checkbox" name="inter" value="游戏"/>游戏</br><input type="checkbox" name="inter" value="看书"/>看书<br/>
html js全选全不选
dreanms的博客
05-15 319
通过js实现全选全不选
前端js原生实现全选全不选
weixin_45096939的博客
11-21 700
现在很多的组件库已经有属性可以直接实现全选全不选的效果，比js原生的写法简单许多；原生的写法是基础，多了解点总没坏处。
HTML5新增特性
m0_48670609的博客
04-14 967
HTML5新增语义化标签，新增音频视频标签，新增表单标签和属性
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 742
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
html全选全不选反选
11-29
以下是HTML中实现全选、全不选和反选的代码示例： 1. 全选效果 ```html <!DOCTYPE html> <html> <head> <title>全选</title> <script type="text/javascript"> function selectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = true; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="全选" onclick="selectAll()"> </form> </body> </html> ``` 2. 全不选效果 ```html <!DOCTYPE html> <html> <head> <title>全不选</title> <script type="text/javascript"> function unselectAll(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = false; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="全不选" onclick="unselectAll()"> </form> </body> </html> ``` 3. 反选效果 ```html <!DOCTYPE html> <html> <head> <title>反选</title> <script type="text/javascript"> function reverseSelect(){ var checkboxes = document.getElementsByName("fruit"); for(var i=0; i<checkboxes.length; i++){ checkboxes[i].checked = !checkboxes[i].checked; } } </script> </head> <body> <h3>水果列表</h3> <form> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> <input type="checkbox" name="fruit" value="pear">梨子<br> <input type="button" value="反选" onclick="reverseSelect()"> </form> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值