JS操作input标签属性checkbox全选的实现代码


Posted in Javascript onMarch 02, 2017

废话不多说了,具体代码如下所示:

<html>
<head>
< >
function selectAll(){
 var checklist = document.getElementsByName ("selected");//获取所有name值为selected的标签
 if(document.getElementById("controlAll").checked){//判断当id为controlAll的标签是否被选中
 for(var i=0;i<checklist.length;i++){ 
  checklist[i].checked = true;//当被选中时,则获取所有name值为selected的标签都被选中
 } 
 }else{
 for(var j=0;j<checklist.length;j++){
  checklist[j].checked = false;//当不被选中时,则获取所有name值为selected的标签都不被选中
 }
 }
}
</ >
</head>
<body>
<form>
<input ="selectAll()" type="checkbox" name="controlAll" style="controlAll" id="controlAll"/>全选<br>
1:<input ="heheda()" type="checkbox" name="selected" value="1"/><br>
2:<input ="heheda()" type="checkbox" name="selected" value="2"/><br>
3:<input ="heheda()" type="checkbox" name="selected" value="3"/><br>
4:<input ="heheda()" type="checkbox" name="selected" value="4"/><br>
5:<input ="heheda()" type="checkbox" name="selected" value="5"/><br>
6:<input ="heheda()" type="checkbox" name="selected" value="6"/><br>
</form>
< type="text/ ">
function heheda(){
 var controlAll = document.getElementById("controlAll");//获取id值为controlAll的标签
 var checklists = document.body.querySelectorAll("input[type='checkbox']").length;//获取所有格式为checkbox的input标签的数量
 var selectedLength=document.body.querySelectorAll("input[name=selected]:checked").length;//获取所有name值为selected,并且已经被选中的input标签的数量
 if(controlAll.checked){//判断当id为controlAll的标签是否被选中
   controlAll.checked = false;//当被选中时,则自动取消id为controlAll的标签选中
 }else{
  if(selectedLength == checklists-1){//当不被选中时,判断当获取所有name值为selected,并且已经被选中的input标签的数量 与 获取所有格式为checkbox的input标签的数量-1 是否相等
  controlAll.checked = true;//如果相等,则自动选中id为controlAll的标签
  }
 }
 }
</ >
</body>
</html>

以上所述是小编给大家介绍的JS操作input标签属性checkbox全选的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
javascript实现列表切换效果
May 02 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 #Javascript
原生js仿浏览器滚动条效果
Mar 02 #Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 #Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 #Javascript
浅谈Vue.js
Mar 02 #Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 #Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 #Javascript
You might like
如何分别全角和半角以避免乱码
2006/10/09 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
Prototype框架详解
2015/11/25 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python面试题之列表声明实例分析
2019/07/08 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
倡议书格式
2014/04/14 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
行政求职信
2014/07/04 职场文书
2015年商场工作总结
2015/04/27 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
小学生教师节广播稿
2015/08/19 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server