这篇文章主要为大家详细介绍了射流研究…实现多选框的操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现多选框的具体代码，供大家参考，具体内容如下
多选时：
全选时：
反选时：
超文本标记语言代码
div class='容器'
h3请选择你最喜欢吃的水果（多选)/h3
保险商实验所
里输入类型='复选框'苹果/李
里输入类型='复选框'雪梨/李
里输入类型='复选框'西瓜/李
里输入类型='复选框'哈密瓜/李
里输入类型='复选框'荔枝/李
里输入类型='复选框'龙眼/李
/ul
div class='checkinAll '
输入类型='checkbox' id='checkAll '全选/非全选
输入类型='checkbox' id='checkTurn '反选
/div
/div
半铸钢钢性铸铁(铸造半钢)代码：
*{
边距：0;
填充：0;
}。容器{
宽度：300像素
/*高度：500像素*/
/*边框：1px纯黑；*/
边距：10px自动；
}。容器ul{
列表样式：无；
宽度：100%;
边距-顶部：20px
边框：1px纯色# 666;
边框半径：10px
边距-底部：10px
}。容器ul li{
宽度：100%;
高度：70px
边框-底部：1px纯色# 666;
行高：70px
文本缩进：50px
字体大小：16px
字体粗细：600;
}。容器ul李：最后一个孩子{
边框-半径：0 0 11px 11px
边框：无；
}。容器ul李：第一个孩子{
border-radius:11px 11px 0 0；
/*边框：无；*/
}
输入[type='checkbox']{
宽度：20px
高度：20px
垂直对齐：居中；
光标：指针；
-网络工具包-外观：无；
边框：1px纯色# 666;
边框半径：3px
}
输入[type='checkbox']:选中{
背景-图像：url(./选择。png)；
背景-重复：不重复；
背景-位置：中心居中；
背景尺寸：100% 100%;
大纲：无；
}
保险商实验所输入{
右边距：40px
}
射流研究…代码：
（函数(){
const list _ node=文档。getelementsbytagname(' Li ')；
const ul _ node=文档。getelementsbytagname(' ul ')[0]
const colorrar=[' rgb(255，235，205)'，' rgb(255，240，245)'，' rgb(255，211，155)']；
常量校验节点=ul节点。getelementsbytagname(“input”)；
const check all=文档。getelementbyid(“check all”)；
const check turn=文档。getelementbyid('检查转弯')
对于(设I=0；i list _ node.lengthi ){
列表节点[I]。风格。背景色=colorrar[I % coloarr。长度]；
列表节点[我].addEventListener('click '，单击fn)；
}
功能点击Fn(e){
控制台。记录(例如，目标。标记名)；
设num=0；
如果(例如，目标。tagname==' INPUT ' e . target。checked==false){
checkAll.checked=false
}否则{
对于(设I=0；我检查_节点。长度；i ) {
if(check_nodes[i].checked==true){
数字
}
}
如果(数量==检查节点。长度){
checkAll.checked=true
}
}
}
//全选/非全选
checkAll.onclick=function(){
if(this.checked==true){
对于(设I=0；我检查_节点。长度；i ) {
检查节点[我].选中=真；
}
}否则{
对于(设I=0；我检查_节点。长度；i ) {
检查节点[我].选中=假；
}
}
}
//反选
checkTurn.onclick=function(){
设count=0；
设num=0；
对于(设I=0；我检查_节点。长度；i ) {
if(check_nodes[i].checked==true){
检查节点[我].选中=假；
数数；
}否则{
检查节点[我].选中=真；
数字
}
}
if(count==check_nodes.length){
checkAll.checked=false
} else if(num==check _ nodes。长度){
checkAll.checked=true
}
}
})()
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。