Home > Article > Web Front-end > How to operate checkboxes in HTML pages
How to operate checkboxes in HTML pages
- 高洛峰Original
- 2017-02-09 17:50:001859browse
Checkboxes are very common on web pages. Whether it is an e-commerce website or a platform, you will see checks wherever there is a need to choose. Next, there are two small demos I wrote before, both about check boxes. I hope they will be helpful to everyone.
The first one is about the operation of selecting all check boxes and inverting the selection. Of course, I also added a small function in it, that is, when the check boxes of Shangpin or other things below are all selected. Then the Select All button also becomes 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">全选</td>
<td width="300px">复选框全选示例</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">反选</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, that is, we can replace our checkboxes with pictures to add a cool touch The effect; and here I am completely using CSS3 writing method, no JavaScript is involved;
<!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>
<p class="box1">
<input type="checkbox" name="" id="input1" value="" />
<label for="input1"></label>
</p>
<p class="box2">
<input type="checkbox" name="" id="input2" value="" />
<label for="input2"></label>
</p>
<p class="box3">
<input type="checkbox" name="" id="input3" value="" />
<label for="input3"></label>
</p>
</body>
</html>
The above is the HTML page that the editor introduces to you. I hope this method of operating the box will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!
For more related articles on how to operate check boxes in HTML pages, please pay attention to the PHP Chinese website!