当前位置:网站首页>Native JS realizes the functions of all selection and inverse selection -- Feng Hao's blog
Native JS realizes the functions of all selection and inverse selection -- Feng Hao's blog
2022-07-06 16:39:00 【Feng Hao (grow up)】
Ideas : First, we get the nodes
Traverse each node Get checked Properties of
Then we change checked The attribute of changes the selected state
We let them all vote for true
We use ! To achieve results
The knowledge points used this time are :
document.getElementsByName(‘name attribute ’): Check all name by name Attribute's element node object
document.getElementById('id name '): adopt id Name get an element node object
onclick: Mouse click event
html part :
<input id = 'quan' type="checkbox" value = ' Future generations '> Future generations
<input type="checkbox" name="items" value=" football " > football
<input type="checkbox" name="items" value=" Basketball " > Basketball
<input type="checkbox" name="items" value=" badminton " > badminton
<input id= "fan" type="checkbox" value=" Reverse election "> Reverse election
js part
var items = document.getElementsByName('items');
var quan = document.getElementById('quan');
var fan = document.getElementById('fan');
function fan1(){
var index = 0;
for(var i =0;i<items.length;i++){
items[i].checked = !items[i].checked;
if(items[i].checked==true){
index ++;
}
}
if(index == 3){
quan.checked = true;
}else{
quan.checked =false;
}
}
quan.onclick=function(){
if(quan.checked ==true){
console.log(items[0].checked);
for(var i = 0;i < items.length;i++){
console.log(items[i].checked);
items[i].checked = true;
fan.checked=false;
}
} else{
for(var i = 0;i < items.length;i++){
// console.log(items[i].checked);
items[i].checked = !true;
fan.checked=false;
}
}
};
fan.onclick =function(){
if(fan.checked== true){
fan1()
}else{
fan1()
}
}
边栏推荐
- 去掉input聚焦时的边框
- QT实现窗口置顶、置顶状态切换、多窗口置顶优先关系
- CMake速成
- (lightoj - 1369) answering queries (thinking)
- Remove the border when input is focused
- Acwing: Game 58 of the week
- 顺丰科技智慧物流校园技术挑战赛(无t4)
- Submit several problem records of spark application (sparklauncher with cluster deploy mode)
- 解决Intel12代酷睿CPU单线程只给小核运行的问题
- QT style settings of qcobobox controls (rounded corners, drop-down boxes, up expansion, editable, internal layout, etc.)
猜你喜欢
QT simulates mouse events and realizes clicking, double clicking, moving and dragging
两个礼拜速成软考中级软件设计师经验
QT realizes window topping, topping state switching, and multi window topping priority relationship
Spark independent cluster dynamic online and offline worker node
Click QT button to switch qlineedit focus (including code)
Codeforces Round #799 (Div. 4)A~H
Chapter 6 datanode
Codeforces Round #801 (Div. 2)A~C
Browser print margin, default / borderless, full 1 page A4
Advancedinstaller installation package custom action open file
随机推荐
CMake Error: Could not create named generator Visual Studio 16 2019解决方法
第6章 Rebalance详解
< li> dot style list style type
本地可视化工具连接阿里云centOS服务器的redis
Installation and use of VMware Tools and open VM tools: solve the problems of incomplete screen and unable to transfer files of virtual machines
QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
CMake速成
第五章 Yarn资源调度器
Useeffect, triggered when function components are mounted and unloaded
Installation and configuration of MariaDB
AcWing:第58场周赛
第一章 MapReduce概述
业务系统从Oracle迁移到openGauss数据库的简单记录
Chapter 5 namenode and secondarynamenode
腾讯面试算法题
图像处理一百题(11-20)
China double brightening film (dbef) market trend report, technical dynamic innovation and market forecast
(lightoj - 1349) Aladdin and the optimal invitation (greed)
875. Leetcode, a banana lover
视频压缩编码和音频压缩编码基本原理