<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击按钮选择性别和兴趣</title>
</head>
<body>
<input type="button" id="rBtn" value="选择性别"/>
<input type="radio" name="sex" checked/>男
<input type="radio" name="sex" />女
<br />
<br />
<input type="button" id="checkBtn" value="全选"/>
<input type="button" id="cancelBtn" value='取消全选' />
<input type="button" id='inverseBtn' value="反选">
<input type="checkbox" name="hobbies" />唱歌
<input type="checkbox" name="hobbies" />跑步
<input type="checkbox" name="hobbies" />写代码
<input type="checkbox" name="hobbies" />跳舞
</body>
<script>
var rBtn = document.getElementById('rBtn');
var cBtn = document.getElementById('checkBtn');
var hobbyObj = document.getElementsByName('hobbies');
var cancelBtn = document.getElementById('cancelBtn');
var inverseBtn = document.getElementById('inverseBtn');
// 全选
cBtn.onclick = function(){
for(var i = 0 ; i < hobbyObj.length ;i++ ){
hobbyObj[i].checked = true;
}
}
// 取消全选
cancelBtn.onclick = function() {
for(var i = 0 ; i < hobbyObj.length ;i++ ){
hobbyObj[i].checked = false;
}
}
// 反选
inverseBtn.onclick = function(){
for(var i = 0 ; i < hobbyObj.length;i++){
if(hobbyObj[i].checked == true){
hobbyObj[i].checked = false;
}else {
hobbyObj[i].checked = true;
}
}
}
</script>
</html>
js实现全选、反选、取消全选 - 软通乐学
最新推荐文章于 2023-08-31 21:11:30 发布
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
