JS实现CheckBox复选框全选全不选功能
更新时间：2015年05月06日 08:50:10 投稿：hebedich
在网站的管理后台应用此功能居多，如一次性处理多个产品，或对文章的删除对产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，今天我就用简单的篇幅来讲解一下这个功能的实现原理和实现过程。
CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭。大多数应用程序的“设置”对话框内均有此控件。我们看到的可以打勾的就是CheckBox。
该控件表明一个特定的状态（即选项）是选定 (on，值为1) 还是清除 (off，值为0)。在应用程序中使用该控件为用户提供“True/False”或“yes/no”的选择。因为 CheckBox 彼此独立工作，所以用户可以同时选择任意多个 CheckBox，进行选项组合。
CheckBox复选框JS实现全选全不选功能,很简单，就只需插入一小段js函数就行了。。。
<script language="javascript">
function cli(Obj)
{
var collid = document.getElementByIdx_x("all")
var coll = document.getElementsByName(Obj)
if (collid.checked){
for(var i = 0; i < coll.length; i++)
coll[i].checked = true;
}else{
for(var i = 0; i < coll.length; i++)
coll[i].checked = false;
}
}
</script>
下面是一组CheckBox复选框html代码
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称');"> 全选
<input name='多选项名称' type='checkbox' value='' > A
<input name='多选项名称' type='checkbox' value='' > B
<input name='多选项名称' type='checkbox' value='' > C
<input name='多选项名称' type='checkbox' value='' > D
<input name='多选项名称' type='checkbox' value='' > E
<input name='多选项名称' type='checkbox' value='' > F
好了，你可以复制一下以上的代码，修改测试一下。。。
这里脚本之家小编推荐大家看下这篇文章：https://www.jb51.net/article/96022.htm
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关文章
这篇文章主要介绍了js实现黑白div块画空心的图形，画出矩形、三角形、菱形、圆形，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
语音识别可以将语音精准识别为文字，在很多场景中都可以使用，本文主要介绍了微信小程序使用同声传译实现语音识别功能，分享给大家，感兴趣的可以了解一下2021-06-06
本文主要分享了js封装一个tab切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
JS实现随机数生成算法的方法有很多，本文为大家介绍一个比较不错的方法，代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
functional继承模式 摘自javascript:the good parts
javascript:the good parts 书中Inheritance部分讲到了一种functional的继承方式, 具体这个functional该如何翻译,就不是很清楚了, 就直接意会一下吧2011-06-06
这篇文章主要为大家详细介绍了微信小程序实现表格前后台分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
因为js url在传值的过程中使用的是js自己默认的字符集编码规则，我们必须把它转成属于我们自己的编码规格2009-11-11
这篇文章主要为大家详细介绍了JavaScript发起HTTP请求的多种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要为大家详细介绍了JavaScript定时器实现无缝滚动图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要介绍了Bootstrap Table服务器分页与在线编辑应用总结 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最新评论