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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了TypeScript联合类型,交叉类型和类型保护，联合类型就是定义一些类型，定义的变量只需要满足任意一种类型即可，交叉类型就是需要满足所有类型，交叉类型使用，更多内容我们来看看下面文章详细内容吧2021-12-12
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
这篇文章主要介绍了JavaScript实现点击单选按钮改变输入框中文本域内容的方法,涉及javascript单选按钮控制页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下2015-08-08
2022年中秋佳节即将来临，中秋节是我们国家的传统节日。而中秋与玉兔又往往会联系在一起，本文将用Threejs做一只会动的3D玉兔，感兴趣的可以了解一下2022-08-08
这篇文章主要为大家介绍了setTimeout 函数在前端延迟搜索实现中的作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码
这篇文章主要介绍了js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码,需要的朋友可以参考下2016-04-04
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
这篇文章主要介绍了bootstrap fileinput组件整合Springmvc上传图片到本地磁盘的方法,需要的朋友可以参考下2017-05-05
微信小程序开发之animation循环动画实现的让云朵飘效果
这篇文章主要介绍了微信小程序开发之animation循环动画实现的让云朵飘效果,结合实例形式分析了animation结合js时间函数实现循环动画效果的具体步骤与相关操作技巧,需要的朋友可以参考下2017-07-07
下面小编就为大家带来一篇js阻止浏览器默认行为的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
网络之美 JavaScript中Get和Set访问器的实现代码
前两天IE9 Beta版发布了，对于从事Web开发的朋友们来说真是个好消息啊，希望将来有一天各个浏览器都能遵循统一的标准。今天要和大家分享的是JavaScript中的Get和Set访问器，和C#中的访问器非常相似。2010-09-09
本篇文章主要是对JS正则表达式验证数字的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论