js实现选择框全选或全不选或反向选择

最新推荐文章于 2024-06-01 16:11:46 发布
最新推荐文章于 2024-06-01 16:11:46 发布
阅读量708 收藏
点赞数 1
分类专栏： 学习 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34125483/article/details/79581540
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkAll() {
    var cb=document.getElementsByName("chosebox");
    var ca=document.getElementById("checkall");
    //全选
    if(ca.checked==true){
        for(var i=0;i<cb.length;i++){
        cb[i].checked=true;
        }
    }
    //全不选
    else{
        for(var i=0;i<cb.length;i++){
        cb[i].checked=false;
        }
    }
    //反向选择
function checkOther() {
    var cb=document.getElementsByName("chosebox");
    for(var i=0;i<cb.length;i++){
        cb[i].checked=!cb[i].checked;
        }
   }
</script>
</head>
<body>
    你喜欢什么？<br>
    <!-- checked="checked"在checkbox里表示选中，当为true时为选中，当为false时为不选中 -->
    玩游戏<input type="checkbox" name="chosebox" value="1" >
    玩游戏<input type="checkbox" name="chosebox" value="1"><br>
    玩游戏<input type="checkbox" name="chosebox" value="1">
    玩游戏<input type="checkbox" name="chosebox" value="1"><br>
    <hr  align="left" width="100px" >
    全选<input type="checkbox" onclick="checkAll()" id="checkall">
    反选<input type="checkbox" onclick="checkOther()">
</body>
</html>

 

一筐小橘子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript案例-js全选和全不选.zip
02-16
此外，为了提高用户体验，我们还可以添加一些额外的逻辑，比如防止在没有子复选框的情况下触发全选/全不选，或者在全选/全不选时更新"全选"按钮的文本或样式，以给出视觉反馈。 总的来说，这个案例提供了学习和理解...
spreadjs_列头添加复选框全选功能-demo.zip
09-09
在实际应用中，我们经常需要在列头添加复选框来实现全选或全不选的功能，以便于用户对大量数据进行操作。本篇将深入探讨如何利用SpreadJS实现这一功能，并结合提供的压缩包文件进行解析。 首先，我们关注的是"demo....
php实现全选_全不选_,JS实现的全选、全不选及反选功能【案例】
weixin_36366239的博客
04-14 278
本文实例讲述了JS实现的全选、全不选及反选功能。分享给大家供大家参考，具体如下：效果图如下:点击全选时会全部选中;全不选时全部不选;反选时反向选中.html结构代码:javascript代码如下:/*一：需求分析：(1)点击全选：选中所有选择框(设置checked属性为true)(2)点击全不选：不选中所有选择框(设置checked属性为false)(3)点击反选：让每一个选择框的checked属...
js实现全选，全不选和反选功能
sinat_41660714的博客
11-20 1905
首先来展示一下 上图中实现的功能是： 点击顶部全选框选中，全部的框都会选中，反之就会全不选中； 当表体中选框全部选中时，全选框选中 当点击反选按钮时，表体中的选框状态置反，选中的变为没选中，没选中变为选中 直接上代码，我就不贴表格样式部分代码了，只贴js实现部分 <script> //1， 全选全不选 var all=document.getElementById("all")...
js复选框之全选&&反选&&不选
不忘的博客
05-29 864
js代码： function allSelect(){ var res = document.getElementsByName("aihao"); for(var i=0; i< res.length;i++){ res[i].checked = true; } } function reSelect(){ var res = document.getElementsByName("aihao"); for(var i=0;i&l
jQuery 实现 Checkbox 的全选、全不选和反向选择的功能
weixin_34060741的博客
02-20 78
为什么80%的码农都做不了架构师？>>> ...
35、element实现下拉选择select全选、反选
伦伦的博客
03-13 885
【代码】35、element实现下拉选择select全选、反选。
【JQuery 实现 layui 复选框 全选/反选/清除的功能】
离离火的博客
06-01 902
获取到渲染过的 div class=“layui-input-block” 里的 input 元素标签，改变其 checked属性。
表单全选、全不选与反选以及悬浮行背景色
Fsallen_hu的博客
10-31 176
JavaScript经典案例：表单全选，全不选、悬浮行背景色，以及选中行变更标题行复选框状态等等非常经典的案例，用于各位复习和练习用。
JS随手记——复选框的全选、全不选与反选
今天怎么又下雨的博客
04-20 583
目标需求：按钮点击实现复选框的全选、全不选与反选 分析：获取到复选框数组后，循环对复选框的选择状态赋值，全选赋true值，全不选赋false值，反选赋其相反值 页面大致如下： 页面部分代码如下： <input type="checkbox" name="likes" value="篮球">篮球<br /> <input type="checkbox" nam...
全选/全不选/反选 批量删除 简单易懂
LC_SXC99的博客
12-02 826
全选/全不选/反选 批量删除 简单易懂---适用小白学习
js实现全选的复选框
09-09
2. 交互反馈：为了提供更好的用户体验，可以在全选复选框的状态改变时更新其文字提示，如“全选”变为“全不选”，反之亦然。 3. 动态加载：如果复选框是动态加载的，可以通过事件委托实现全选功能。将事件监听器...
全选反选复选框JS实现
07-29
总之，通过JavaScript实现全选、反选和复选框状态同步是前端开发中的一项基本技能，这不仅提升了用户体验，也简化了后端处理大量用户选择的复杂度。理解并掌握这一技术，对于提升网页的交互性和功能性至关重要。
用js代码写全选与全不选
10-23
在JavaScript（JS）中，全选与全不选的功能通常应用于多选列表或者表格中，让用户可以方便地一次性选择或取消所有选项。这个主题对于初学者来说是非常基础且实用的知识点，下面我们将深入探讨如何使用JavaScript实现...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
纯js实现穿梭框全选全不选，左右穿梭
05-16
实现穿梭框全选和全不选，可以在页面中添加两个复选框，一个表示全选，一个表示全不选，然后通过 JS 代码来实现对所有选项进行选中或取消选中的操作。 以下是一个简单的示例代码： HTML代码： ``` <label>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值