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
How to modify the time zone and time in Ubuntu system
On a Linux computer, there are two times, one is ...
Solve the problem of using swiper plug-in in vue
Since I used this plugin when writing a demo and ...
Introduction and tips for using the interactive visualization JS library gojs
Table of contents 1. Introduction to gojs 2. Gojs...
What are the differences between sql and mysql
What is SQL? SQL is a language used to operate da...
js precise calculation
var numA = 0.1; var numB = 0.2; alert( numA + num...
Detailed introduction to CSS priority knowledge
Before talking about CSS priority, we need to und...
Methods and steps to access Baidu Maps API with JavaScript
Table of contents 1. Baidu Map API Access 2. Usin...
Detailed example of removing duplicate data in MySQL
Detailed example of removing duplicate data in My...
Radio buttons and multiple-choice buttons are styled using images
I've seen people asking before, how to add sty...
Specific use of Linux dirname command
01. Command Overview dirname - strip non-director...
Method for implementing performance testing of MySQL database through sysbench tool
1. Background Sysbench is a stress testing tool t...
Perfect solution to Docker Alpine image time zone problem
Recently, when I was using Docker to deploy a Jav...
docker run -v mounts data volumes abnormally, and the container status is always restarting
Problems: After adding the -v parameter to docker...
Detailed explanation of sshd service and service management commands under Linux
sshd SSH is the abbreviation of Secure Shell, whi...
Detailed explanation of lazy loading and preloading of webpack
Table of contents Normal loading Lazy Loading Pre...