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
Memcached method for building cache server
Preface Many web applications store data in a rel...
A brief discussion on several advantages of Vue3
Table of contents 1. Source code 1.1 Monorepo 1.2...
A brief analysis of the differences and functions between transition, transform, and translate in CSS3
transform and translate Transform refers to trans...
Detailed explanation of the use of grid properties in CSS
Grid layout Attributes added to the parent elemen...
VMware Workstation is not compatible with Device/Credential Guard
When installing a virtual machine, a prompt appea...
Win10 + Ubuntu 16.04 dual system perfect installation tutorial [detailed]
Be sure to remember to back up your data, it is p...
Installation of mysql-community-server. 5.7.18-1.el6 under centos 6.5
Use the following command to check whether MySQL ...
MySQL semi-synchronous replication principle configuration and introduction detailed explanation
Environment Introduction: Ubuntu Server 16.04.2+M...
Solution to the problem "/bin/sh: pip: command not found" during Dockerfile build
The content of the written Dockerfile is: FROM py...
5 issues you should pay attention to when making a web page
1. Color matching problem <br />A web page s...
Detailed tutorial for installing MySQL 8.0.22 on Redhat 7.3 (binary installation)
Table of contents 1. Download the MySQL installat...
Design perspective technology is an important capital of design ability
A design soldier asked: "Can I just do pure ...
Analysis of Context application scenarios in React
Context definition and purpose Context provides a...
Vue el-date-picker dynamic limit time range case detailed explanation
There are two situations 1. Start time and end ti...
In-depth understanding of CSS @font-face performance optimization
This article mainly introduces common strategies ...