javascript 全选、取消全选与反选

最新推荐文章于 2023-07-11 22:34:21 发布
最新推荐文章于 2023-07-11 22:34:21 发布
阅读量447 收藏 3
点赞数 1
分类专栏： JS template 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LX_luo/article/details/87894786
版权

一、全选与取消全选

html代码

<body>
    看书：<input type="checkbox" name="checkbox" value=1><br>
    写字：<input type="checkbox" name="checkbox" value=2><br>
    打飞机：<input type="checkbox" name="checkbox" value=3><br>
    玩游戏：<input type="checkbox" name="checkbox" value=4><br>
    <button onclick="allcheck()">全选/取消</button>
</body>

js代码

function allcheck() {
    var checkNum = 0;
    let inputs = document.getElementsByName("checkbox");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            checkNum++;
        }
    }

    if (checkNum == inputs.length) {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = false;
        }
    } else {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;
        }
    }
}

运行实例

width="100%" height="300" src="https://c.runoob.com/iframe/4083" allowfullscreen="allowfullscreen">

二、全选、取消全选与反选

html代码

<body>
    看书：<input type="checkbox" name="checkbox" value=1><br>
    写字：<input type="checkbox" name="checkbox" value=2><br>
    打飞机：<input type="checkbox" name="checkbox" value=3><br>
    玩游戏：<input type="checkbox" name="checkbox" value=4><br>
    <button onclick="opcheckboxed('checkbox', 'checkall')">全选</button>
    <button onclick="opcheckboxed('checkbox', 'uncheckall')">取消全选</button>
    <button onclick="opcheckboxed('checkbox', 'reversecheck')">反选</button>
</body>

js代码

function opcheckboxed(objName, type) {
    var objNameList = document.getElementsByName(objName);
    if (null != objNameList) {
        for (var i = 0; i < objNameList.length; i++) {
            if (objNameList[i].checked == true) {
                if (type != 'checkall') { // 非全选
                    objNameList[i].checked = false;
                }
            } else {
                if (type != 'uncheckall') { // 非取消全选
                    objNameList[i].checked = true;
                }
            }
        }
    }
}

运行实例

width="100%" height="300" src="https://c.runoob.com/iframe/5359" allowfullscreen="allowfullscreen">

引用

JavaScript 函数 | 菜鸟教程 |评论.

LX_luo
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现全选/取消全选，反选/取消反选
啊哈前端的专栏
01-05 1404
全选/取消全选，反选/取消反选 全选/取消全选反选/取消反选 window.onload=function(){ var targets=document.getElementsByName("checkmost"), selectAll=document.getElementById("sel
js复选框全选与取消全选
weixin_47704826的博客
09-05 1318
作者水平有限，所写方案可能存在某些作者未考虑到的bug，希望发现的小伙伴可以指出。对于本案标题的解决方案，有其他方法的小伙伴也可以分享自己的方法，让我们共同进步。个人觉得技术文章还是要直接在代码上直接写一些注释更容易理解一些。
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1030
完整代码如下 <!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实现复选框全选、反选、取消功能
lyq0011的博客
08-26 4885
1、获取全选按钮对象。2、全选按钮触发时候，让input复选框遍历所有对象。3、全选：checked属性值设为true。反选：checked属性值取反！。取消：checked属性值设为false
全选反选（javacript&jQuery实现有何不同）
adminsir0的博客
08-29 224
js,jQuery,全选，反选，多选框
JS.全选，反选，取消选择
BowenXu11的博客
04-13 164
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"...
JS复选框的全选和取消全选
weixin_53126056的博客
12-19 226
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" charset="utf-8"> window.onload = function(){ //给id为chk绑定click var chke = document.getElem
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
javascript 全选/反选,取消选择效果
10-29
本篇文章将详细介绍如何使用 JavaScript 来实现全选、反选以及取消选择的效果。 首先，我们需要了解实现这些功能的基本思路。全选功能是选中所有复选框（checkbox），反选则是取消所有已选中的复选框，而取消选择...
html css js表单中全选取消反选效果
11-11
接下来，我们利用JavaScript来实现全选、取消全选以及反选的功能。这通常涉及到对`querySelectorAll`、`checked`属性和事件监听器的使用。我们可以添加以下JavaScript代码： ```javascript document.getElementById...
js实现全选和反选功能
10-25
js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能
js checkbox全选 反选 取消全部设置表单checkbox复选框勾选
09-26
js特效制作js checkbox复选框全选 反选 取消全部等设置多个表单里面的checkbox复选框勾选特效。内含js代码下载。
JS实现复选框全选全不选以及子复选框带动全选框的选中
04-26
实现全选全不选反选 并且,如果是在全选状态下将子复选框的选中取消, 那么全选复选框自动取消全选 如果全选复选框没有选中而子复选框全部被选中, 那么全选复选框自动选中全选
js checkbox全选 反选 取消全部设置表单html复选框
10-27
js checkbox全选 反选 取消全部设置表单html复选框
jquery 、js实现复选框 (全选、反选)
06-09
jquery 、js实现复选框 (全选、反选)功能··
javascript实现checkBox的全选，反选与赋值
10-24
主要介绍了javascript实现checkBox的全选，反选与赋值的方法，以实例形式详细分析了实现的思路及对应的html与js代码的实现过程
JavaScript实现全选和反选功能
最新发布
weixin_51938823的博客
07-11 768
利用JS写了一个相对简单的全选和反选功能。
JS全选与反选
qq_34082921的博客
09-10 1564
【代码】JS全选与反选的代码实现。
【JavaScript】实现全选和反选功能
weixin_62012986的博客
11-26 1734
这种情况在购物车中尤为常见
“表单全选取消全选”，js实现全选与反选的功能
06-13
好的，实现表单全选与取消全选的功能，需要用到JavaScript来动态修改表单元素的checked属性。下面是一个简单的示例代码，用于实现表单全选和取消全选的功能。 HTML部分： ``` 选项1 选项2 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值