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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
pytorch打印网络结构的实例
2019/08/19 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
关于python中导入文件到list的问题
2020/10/31 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
检察官就职演讲稿
2014/01/13 职场文书
学年自我鉴定
2014/01/16 职场文书
企业申诉管理制度
2014/01/30 职场文书
献爱心活动总结
2014/05/07 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年技术部工作总结
2014/12/12 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android