How to operate the check box in HTML page
|
Checkboxes are very common on web pages. Whether it is an e-commerce website or a platform, you will see checkboxes wherever there is a need to make a selection. Next, here are two small demos I wrote before, both about checkboxes, I hope they will be helpful to you. The first one is about the operation of selecting and deselecting all checkboxes. Of course, I also added a small function in it, that is, when the checkboxes of the selected products or other things below are all selected, the select all button will also become selected; vice versa. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
border: 1px solid black;
text-align: center;
}
table{
border: 1px solid black;
}
#opp{
border-radius: 50%;
width: 20px;
height: 20px;
border: 1px style #eee;
outline-style: none;
}
</style>
</head>
<body>
<table>
<tr>
<td><input id="all" type="checkbox">Select All</td>
<td width="300px">Checkbox Select All Example</td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input class="list" type="checkbox"></td>
<td></td>
</tr>
<tr>
<td><input id="opp" type="button">Invert selection</td>
<td></td>
</tr>
</table>
<script>
var vll = document.getElementById("all");
var vlist = document.getElementsByClassName("list");
var vopp = document.getElementById("opp");
vll.onclick=function(){
for(var i=0;i<vlist.length;i++){
vlist[i].checked=vll.checked;
}
}
for( var i=0;i<vlist.length;i++){
vlist[i].onclick=function(){
if(this.checked==false){
vll.checked=false;
}
else{
for(var i2=0;i2<vlist.length;i2++){
if(vlist[i2].checked==false){
break;
}
if(i2>=vlist.length-1){
vll.checked=true;
}
}
}
}
}
vopp.onclick=function(){
for(var i=0;i<vlist.length;i++){
vlist[i].checked=!vlist[i].checked;
if(vlist[i].checked==false){
vll.checked=false;
}
}
}
</script>
</body>
</html>The second one is to customize the checkbox style, which is to replace our checkbox with an image to add a cool effect; and here I completely use CSS3 writing, without involving JavaScript; <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box1{
width: 1000px;
height: 50px;
position: relative;
}
input{
width: 50px;
height: 50px;
opacity: 1;
display: none;
}
input+label{
display: block;
width: 50px;
height: 50px;
background: url(img/2.png);
background-size: 100%;
}
input:checked+label{
background: url(img/1.PNG);
background-size: 100%;
}
</style>
</head>
<body>
<div class="box1">
<input type="checkbox" name="" id="input1" value="" />
<label for="input1"></label>
</div>
<div class="box2">
<input type="checkbox" name="" id="input2" value="" />
<label for="input2"></label>
</div>
<div class="box3">
<input type="checkbox" name="" id="input3" value="" />
<label for="input3"></label>
</div>
</body>
</html>The above is the operation method of check boxes in HTML pages introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Introduction to common commands and shortcut keys in Linux
>>: base target="" specifies the target of the base link to open the frame
Recommend
Detailed explanation of Vue + Axios request interface method and parameter passing method
Table of contents 1. Get request: 2. Post request...
Example of assigning values to ActiveX control properties by param name in a web page
Copy code The code is as follows: <HTML> &l...
Explore VMware ESXI CLI common commands
Table of contents 【Common commands】 [Summary of c...
How to quickly deploy Gitlab using Docker
1. Download the gitlab image docker pull gitlab/g...
How to uninstall MySQL cleanly (tested and effective)
How to uninstall Mysql perfectly? Follow the step...
How to modify the master-slave replication options in MySQL online
Preface: The most commonly used architecture of M...
Summary of CSS usage tips
Recently, I started upgrading my blog. In the proc...
Perfect solution to MySQL common insufficient memory startup failure
1. If MySQL is not started successfully, check th...
Solution to forgetting the administrator password of mysql database
1. Enter the command mysqld --skip-grant-tables (...
Implementation of Docker deployment of Nuxt.js project
Docker official documentation: https://docs.docke...
How to reset Zabbix password (one-step)
Problem Description Since we don't log in to ...
Detailed installation and use of docker-compose
Docker Compose is a Docker tool for defining and ...
4 ways to optimize MySQL queries for millions of data
Table of contents 1. The reason why the limit is ...
Use of Linux date command
1. Command Introduction The date command is used ...
js memory leak scenarios, how to monitor and analyze them in detail
Table of contents Preface What situations can cau...