HTML 페이지에서 체크박스를 작동하는 방법
- 高洛峰원래의
- 2017-02-09 17:50:001919검색
체크박스는 전자상거래 웹사이트든 플랫폼이든 웹페이지에서 매우 흔히 볼 수 있습니다. 다음으로, 제가 이전에 작성한 두 가지 작은 데모가 있습니다. 두 가지 모두 모두에게 도움이 되기를 바랍니다.
첫 번째는 체크박스를 모두 선택하고 선택을 반전시키는 작업에 대한 것입니다. 물론 그 안에 작은 기능도 추가했습니다. 즉, 아래의 상핀이나 기타 항목을 선택하는 체크박스가 그러면 모두 선택 버튼도 선택됩니다.
<!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>
두 번째는 체크박스 스타일을 사용자 정의하는 것입니다. 즉, 체크박스를 그림으로 대체하여 멋진 터치를 추가할 수 있습니다. 전적으로 CSS3 작성 방식을 사용하고 있으며 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>
<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>
위는 편집자가 소개하는 HTML 페이지입니다. 상자가 도움이 될 것입니다. 질문이 있는 경우 메시지를 남겨주시면 시간 내에 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
HTML 페이지에서 체크박스를 조작하는 방법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.