2021-05-18

复选框

开发工具与关键技术： Visual Studio Code

1、 这样吧，先给你们看一下成品展示图，这是还没点击上面视图的页面。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210518153120163.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzU4MDI0ODMw,size_16,color_FFFFFF,t_70#pic_center)


额-所谓复选框就是可以多选几个你喜欢的选项。

至于最下面的三个选项就是字面意思
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210518153128768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzU4MDI0ODMw,size_16,color_FFFFFF,t_70#pic_center)


2、接下来就是老样子看js部分啦！哦这次还加上了html的。
这是html的那些选框，下面是代码部分，感觉有用的可以试一下呀！
<tr>
<p><input type="checkbox" class="num" name="num"/>足球</p>

</tr>
<tr>
<p><input type="checkbox" class="num" name="num"/>篮球</p></tr>

<tr>
<p><input type="checkbox" class="num" name="num"/>乒乓球</p></tr>

<tr>
<p><input type="checkbox" class="num" name="num"/>游泳</p></tr>

<tr>
<p><input type="checkbox" class="num" name="num"/>唱歌</p>
</tr>

<tr>
<span><input type="checkbox" name="all"/>全选</span>
</tr>

<tr>
<span> <input type="checkbox" name="reall"/>反选</span>
</tr>

<tr>
<span> <input type="checkbox" name="smki"/>全不选</span>
</tr>
3、这是js的内容。


<script>
var allDom = document.getElementsByName("all")[0]; //找到全选框
var numDoms = document.getElementsByName("num"); //找到6个选项的数组
var reallDom = document.getElementsByName("reall")[0]; //找到反选框
var smkiDom = document.getElementsByName("smki")[0]; //找到反选框
allDom.onclick = function(){ //定义一个全选框的点击函数
if(this.checked){ //判断全选框是否选中,如果返回值为true代表选中
for(var i=0;i<numDoms.length ;i++){ //使用for循环选中6个列表框
numDoms[i].checked = true;//全选
}
}else{ //如果返回值为false代表未选中
for(var i=0;i<numDoms.length;i++){ //使用for循环取消6个列表框的选中状态
numDoms[i].checked = false;//
这句话就是给元素添加的checked属性一开始是显示的
循环每个按钮，把checked属性隐藏掉!
}
}g
}
reallDom.onclick = function(){ //定义一个反选框的点击函数
for(var i=0;i<numDoms.length;i++){ //使用for循环遍历数组
if(!numDoms[i].checked){ //如果下标为i的列表框处于未选中状态时
numDoms[i].checked = true; //选中
}else{ //反之,如果下标为i的列表框处于选中状态时
numDoms[i].checked = false; //取消选中

}
}
}
smkiDom.onclick = function(){ //定义一个全不选框的点击函数
for(var i=0;i<numDoms.length;i++){ //使用for循环遍历数组，先设i为初始值0，i要小于列表的长度，自增循环
if(!numDoms[i].checked){ //如果下标为i的列表框处于未选中状态时
/*numDoms[i].checked = true; */ //选中
}else{ //反之,如果下标为i的列表框处于选中状态时
numDoms[i].checked =false;
}}}
</script>
以上就是复选框的制作啦