확인란은 웹 페이지에서 매우 일반적입니다. 다음으로, 내가 전에 쓴 두 가지 작은 데모는 모두 확인란에 관한 것이므로 모든 사람이 도움이되기를 바랍니다.
첫 번째는 체크 박스의 전체 선택에 관한 것입니다.
<DocType html> <html> <gead> <meta charset = utf-8> </title> <style> td {1px solid-align : center;} 테이블; } #opp {Border-Radius : 20px; 입력 ID = 모든 유형 = Checkbox> 전체 선택 </td> <td width = 300px> 확인란 전체 선택 예 </td> </tr> <td> <입력 클래스 = 목록 유형 = Checkbox> </td> < td> </td> </td> <l> <nput class = list type = checkbox> </td> </td> </td> <tr> <td> <입력 클래스 = 목록 유형 = checkbox> < /td> </td> </td> <tr> <입력 클래스 = 목록 유형 = checkbox> </td> </td> td> </td> </td> <td> <입력 클래스 = 목록 유형 = checkbox> </td> </td> </td> <td> <입력 클래스 = 목록 유형 = checkbox> </td> <td> </td> </tr> <l> <nput class = list type = checkbox> </td> </td> </tr> <tr> <td> <td> <입력 ID = opp type = button> 안티 선택 </td> </td> </tr> </table> <cript> var vls.getElementById = var vlist (list); 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;} e {for (var i2 = 0; i2 <vlist.length; i2 ++) {if (vlist [i2] .checked == false) { break;} if (i2> = vlist.length-) {vll.checked = true;}}}}} vopp.onclick = function () {for (var i = 0; i <vlist.length; i ++) {vlist [i] .Checked =! Checked;두 번째는 커스텀 확인란 스타일로, 사진을 사용하여 체크 박스를 교체하여 멋진 효과를 증가시킬 수 있습니다.
<html> <html> <gead> </title> <style>. 불투명도 : 디스플레이+레이블 : 50px; 배경 : URL (img/1.png); 100%;} </style> </head> <hod> <div class = box1> <입력 유형 n ame = id = 입력 1 value =/ > <label for = input1> </label> </div> <div class = box2> <입력 유형 = checkbox name = id =/> <label = input2> </l abel> </div> <div class = box3> <입력 유형 = 확인란 이름 = id = 입력 3 value =/> <레이블 for = input3> </label> </body> </html>
위는 Xiaobian이 소개 한 HTML 페이지의 조작 방법입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!