全选、全部选、反选操作的实现（JS）

最新推荐文章于 2021-06-19 00:28:22 发布

krenyelang

最新推荐文章于 2021-06-19 00:28:22 发布

阅读量848

点赞数

分类专栏：经验分享 JS的学习文章标签： input button function javascript

本文链接：https://blog.csdn.net/krenyelang/article/details/6897394

版权

经验分享同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JS的学习

6 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>歌曲选择的实现</title>
<script language="javascript" type="text/javascript">
function selAll()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="checked";
}
}
}
function none()
{
///全不选
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="";
}
}
}
///反选操作;
function f()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){

var inp=inputs[i];
if(inp.type=="checkbox"){
// if(inp.checked==true){
// inp.checked=" ";
// }
// else{

//inp.checked="checked";
//}
inp.checked=!inp.checked;
}
}
}
</script>
</head>
<body>
<div id="divlist">
<input type="checkbox" id="p1" ><label for="p1">伤心太平洋</label>
<input type="checkbox" id="p2"><label for="p2">兄弟</label>
<input type="checkbox" id="p3"><label for="p3">有梦的人</label>
<br>
<input type="button" value="全选" οnclick="selAll();"><input type="button" οnclick="none();" value="全不选"><input type="button" value="反选" οnclick="f()">
</div>
</body>
</html>