原生js实现选中所有的checkbox

<div class="con"><input name='多选项名称' type='checkbox' value='' id="all" οnclick="cli('cc');"> 全选
<input name='cc' type='checkbox' value='' > A
<input name='cc' type='checkbox' value='' > B
<input name='cc' type='checkbox' value='' > C
<input name='cc' type='checkbox' value='' > D
<input name='cc' type='checkbox' value='' > E <input name='cc' type='checkbox' value='' > F </div> <script type="text/javascript"> function cli (obj) { let chill = document.getElementById('all') let chilles = document.getElementsByName(obj) if (chill.checked) { for (let i = 0; i < chilles.length; i++) { chilles[i].checked = true } } else { for (let i = 0; i < chilles.length; i++) { chilles[i].checked = false } } }

原生js实现选中所有的checkbox。需要给所有的input标签写上专属的name。getElementsByName() 方法可返回带有指定名称的对象的集合。查询元素的 name 属性。

转载于:https://www.cnblogs.com/peko/p/7561412.html

原生js实现选中所有的checkbox相关推荐

通过js控制layui选择框checkbox的选中、取消选中，以及使用layui实现全选、取消全选的一种方式
js控制选中.取消选中 ,layui实现全选.取消全选 layui版本2.5.x html部分: <form class="layui-form" id="form ...
根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
原生js实现table 横向纵向全选功能
要实现这种功能,很明显用elment ui实现不了.element ui 纵向需要prop名字不一样才能展示,很明显,我这个一层二层是名字一样的数组期望后台返回数组是这种格式. 所有需要自己用ta ...
JQuary（从原生js到jq，就发现jq好简单）
1.jQuery介绍 jQuery是一个优秀的JavaScript库,以最少的代码实现更多的功能特点: 1.强大的选择器的功能 $("selector") 2.语法简介 $(&q ...
原生js编写小米购物车
原生js编写小米购物车案例思路一.将数据渲染到下方ul中 1.遍历数据添加到li标签内二.渲染购物车内容,将ul中li添加到购物车.添加点击事件 1.加入购物车内容1.判断购物车内需不需要添加此 ...
原生JS项目练习——全选与全不选和反选
目录一.主要功能介绍: 二.JS代码详细步骤解析: JS代码: 三.全部代码: 感谢:@有鱼是只猫提供的视频一.主要功能介绍: 1.用原生JS实现全选:用for循环遍历每一个input,让他全部选 ...

原生js实现选中所有的checkbox

原生js实现选中所有的checkbox相关推荐

最新文章

热门文章