체크박스는 전자상거래 웹사이트든 플랫폼이든 웹페이지에서 매우 흔히 볼 수 있습니다. 다음으로, 제가 이전에 작성한 두 개의 작은 데모가 있습니다. 둘 다 체크박스에 관한 특정 코드는 참고용으로 스크립트 홈 플랫폼에서 공유됩니다.
체크박스는 웹페이지에서 매우 일반적입니다. 전자상거래 웹사이트나 플랫폼 중 선택해야 할 곳마다 확인란이 표시됩니다. 다음으로, 제가 이전에 작성한 두 가지 작은 데모가 있습니다. 두 가지 모두 모두에게 도움이 되기를 바랍니다.
첫 번째는 체크박스를 모두 선택하고 선택을 반전시키는 작업에 대한 것입니다. 물론 그 안에 작은 기능도 추가했습니다. 즉, 아래의 상핀이나 기타 항목을 선택하는 체크박스가 그러면 모두 선택 버튼도 선택됩니다.
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!