javaScript实现复选框全选反选事件详解
更新时间：2020年11月20日 15:07:21 作者：Z_唐
这篇文章主要为大家详细介绍了javaScript实现复选框全选反选事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javaScript实现复选框全选反选的具体代码，供大家参考，具体内容如下
代码
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script>
window.onload=function(){
var selAll=document.getElementById("selAll");
var hobbys=document.getElementsByName("hobby");
var fx=document.getElementById("fx");
var myClick=document.getElementById("xz");
function myClick(){
alert("hello");
}
//全选事件
selAll.onclick=function(){
if(selAll.checked == true){
for ( var i=0; i<hobbys.length; i++) {
hobbys[i].checked=true;
}
}else{
for ( var i=0; i<hobbys.length; i++) {
hobbys[i].checked=false;
}
}
}
//反选事件
fx.onclick=function(){
for (var i=0; i<hobbys.length; i++) {
var b=hobbys[i];
if (b.checked == true) {
b.checked=false
}else{
b.checked=true;
}
}
}
}
</script>
</head>
<body>
<span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全选</span>
<button id="fx">反选</button></br>
<input type="checkbox" name="hobby" />羽毛球
<input type="checkbox" name="hobby"/>绘画
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了bootstrap配合Masonry插件实现瀑布式布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要给大家介绍了关于JavaScript前后端JSON使用方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要给大家介绍了关于利用ECharts.js画K线图的相关资料,，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了JavaScript中Dom操作,结合实例形式详细分析了javascript针对dom元素节点增删改查相关操作技巧与注意事项,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了JavaScript获取当前url路径过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
JavaScripts数组里的对象排序的24个方法(最新整理收藏)
文章介绍了24种在JavaScript中对数组进行排序的方法,每种方法都有具体的示例和应用场景,适合不同情况下的排序需求,感兴趣的朋友跟随小编一起看看吧2025-01-01
这篇文章主要介绍了javascript 中事件冒泡和事件捕获机制的详解的相关资料,网上的相关资料有很多，但是讲的不是多清楚，通过本文希望能让大家理解掌握，需要的朋友可以参考下2017-09-09
日期范围选择器是一个常见的Web应用功能,它允许用户选择一个日期范围,本文我们将使用JavaScript来实现这个功能,感兴趣的小伙伴可以了解下2024-01-01
使用weixin-java-tools完成微信授权登录、微信支付的示例
这篇文章主要介绍了使用weixin-java-tools完成微信授权登录、微信支付的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Electron是一个用于构建跨平台桌面应用程序的框架,它结合了Node.js和Chromium,本文主要介绍了如何使用Electron实现截图功能,感兴趣的可以了解一下2024-12-12
最新评论