复选框
开发工具与关键技术: 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>
以上就是复选框的制作啦