html全选反选
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选反选title>
head>
<body>
<div id="hobby">
<input type="checkbox" value="1"/>唱歌
<input type="checkbox" value="2"/>跳舞
<input type="checkbox" value="3"/>rap
<input type="checkbox" value="4"/>篮球
div>
<input type="button" onclick="all_check()" value="全选"/>
<input type="button" onclick="no_check()" value="不选"/>
<input type="button" onclick="toggle_check()" value="反选"/>
body>
html>
<script>
hobby = document.getElementById('hobby')
var ainput = hobby.getElementsByTagName('input')
var len = ainput.length
function all_check() {
for(var i=0;i<len;i++) {
//ainput[i] checked值选中
ainput[i].checked = true
}
}
function no_check() {
for(var i=0;i<len;i++) {
ainput[i].checked = false
}
}
function toggle_check() {
for(var i=0;i<len;i++) {
if(ainput[i].checked == true) {
ainput[i].checked = false
}else {
ainput[i].checked = true
}
}
}
script>测试如下
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-06-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
腾讯云服务器利旧
云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。