HTML 페이지에서 체크박스를 사용하는 방법
- 高洛峰원래의
- 2017-03-11 11:50:153180검색
체크박스는 전자상거래 웹사이트든 플랫폼이든 웹페이지에서 매우 흔히 볼 수 있습니다. 다음으로, 제가 이전에 작성한 두 개의 작은 데모가 있습니다. 둘 다 체크박스에 관한 특정 코드는 참고용으로 스크립트 홈 플랫폼에서 공유됩니다.
체크박스는 웹페이지에서 매우 일반적입니다. 전자상거래 웹사이트나 플랫폼 중 선택해야 할 곳마다 확인란이 표시됩니다. 다음으로, 제가 이전에 작성한 두 가지 작은 데모가 있습니다. 두 가지 모두 모두에게 도움이 되기를 바랍니다.
첫 번째는 체크박스를 모두 선택하고 선택을 반전시키는 작업에 대한 것입니다. 물론 그 안에 작은 기능도 추가했습니다. 즉, 아래의 상핀이나 기타 항목을 선택하는 체크박스가 그러면 모두 선택 버튼도 선택됩니다.
<!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 작성을 사용합니다.
<!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 페이지의 확인란 작업 방법입니다. 질문이 있으시면 메시지를 남겨주시면 제 시간에 답변해 드리겠습니다. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!
위 내용은 HTML 페이지에서 체크박스를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 선택 윤곽 속성 분석다음 기사：HTML의 선택 윤곽 속성 분석