html 多选框 2020年06月24日11:29:18JS文中本文

JS实现多选框的操作

更新时间:2020-06-24 11:29:18 作者:

本文主要详细介绍JS实现多选框的操作。文章中的示例代码很详细,有一定的参考价值。有兴趣的朋友可以参考一下

本文示例分享了JS实现多选框的具体代码html 多选框html 多选框,供大家参考。具体内容如下

多选时:

全选时:

取消选择时:

html 代码

请选择你最喜欢吃的水果(多选)

  • 苹果
  • 雪梨
  • 西瓜
  • 哈密瓜
  • 荔枝
  • 龙眼
全选/非全选 反选

CSS 代码:

*{
  margin: 0;
  padding: 0;
}
.container{
  width: 300px;
  /* height: 500px; */
  /* border: 1px solid black; */
  margin: 10px auto;
}
.container ul{
  list-style: none;
  width: 100%;
  margin-top: 20px;
  border: 1px solid #666;
  border-radius: 10px;
  margin-bottom: 10px;
}
.container ul li{
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #666;
  line-height: 70px;
  text-indent: 50px;
  font-size: 16px;
  font-weight: 600;
  
}
.container ul li:last-child{
  border-radius: 0 0 11px 11px;
  border: none;
}
.container ul li:first-child{
  border-radius: 11px 11px 0 0;
   /* border: none; */
 }
input[type='checkbox']{
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  border: 1px solid #666;
  border-radius: 3px;
}
input[type='checkbox']:checked{
  background-image: url(./select.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  outline: none;
}
ul input{
  margin-right: 40px;
}

JS代码:

<pre class="brush:js;”>
(function(){
const list_node = document.getElementsByTagName(‘li’);
const ul_node = document.getElementsByTagName(‘ul’)[0]
const colorArr = [‘rgb(255,235,205)’,’rgb(255,240,245)’,’rgb(255,211,155)’];
const check_nodes = ul_node.getElementsByTagName(‘input’);
const checkAll = document.getElementById(‘checkAll’);
const checkTurn = document.getElementById(‘checkTurn’)
for(let i = 0; i < list_node.length; i++){
list_node[i].style.backgroundColor = colorArr[i % colorArr.length];
list_node[i].addEventListener('click',clickFn);
}
function clickFn(e){
console.log(e.target.tagName);
let num = 0;
if(e.target.tagName == 'INPUT' && e.target.checked == false){
checkAll.checked = false;
}else{
for (let i = 0; i < check_nodes.length; i++) {
if(check_nodes[i].checked == true){
num++;
}

}
if(num == check_nodes.length){
checkAll.checked = true;
}
}
}
//全选/非全选
checkAll.onclick = function(){
if(this.checked == true){
for (let i = 0; i < check_nodes.length; i++) {
check_nodes[i].checked = true;

}
}else{
for (let i = 0; i < check_nodes.length; i++) {
check_nodes[i].checked = false;

}
}
}
//反选
checkTurn.onclick = function(){
let count = 0;
let num = 0;
for (let i = 0; i < check_nodes.length; i++) {
if(check_nodes[i].checked == true){
check_nodes[i].checked = false;
count ++;
}else{
check_nodes[i].checked = true;
num++;
}

}
if(count == check_nodes.length){
checkAll.checked = false;
}else if(num == check_nodes.length){
checkAll.checked = true;
}
}
})()

以上是本文的全部内容。希望对大家的学习有所帮助,也希望大家多多支持。

文章来源:https://www.jb51.net/article/189432.htm

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容