The check box is very common in the webpage. Whether it is an e -commerce website or a platform, you will see the check -ups where you need to choose. Next, the two small demo I have written before, both of which are about the check box, I hope it will help everyone.
The first is about the operation of the full selection of the check box. Of course, I also added a small feature inside, that is, when the check box of the still product or other things is selected. Select the state; vice versa.
<! Doctype html> <html> <gead> <meta charset = UTF-8> </Title> <Style> TD {border: 1px solid black; text-align: center;} Table {border: 1px so lid Black;} #opp {border-radius: 50%; width: 20px; height: 20px; border: 1px style #eee; outline-style: none;} </style> </head> <body> tr> <td> <input id = all type = checkbox> full selection </td> <td width = 300px> check box full selection example </td> </tr> <td> <input class = list type = checkbox> </td> <td> </td> </tr> <l> <nput class = list type = checkbox> </td> </td> </tr> <tr> <td> <input class = list type = Checkbox> </td> </td> </tr> <tr> <input class = list type = Checkbox> </td> </td> TD> </TD> </TR> <TD> <input class = list type = Checkbox> </td> </td> </tr> <td> <input class = list type = checkbox> </td> <td> </td> </tr> <l> <nput class = list type = checkbox> </td> </td> </tr> <tr> <td> <input ID = opp type = Button> Anti -selection </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;} 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 =! vlist [i] .Checked; if (vlist [i ] .Checked == false) {vll.checked = false;}}} </script> </body> </html>The second one is the custom check box style, which can use pictures to replace our check box to increase the cool effect; and here I use CSS3 to write, involving JavaScript;
<! Doctype html> <html> <gead> <meta charset = UTF-8> </Title> <Style> .BOX1 {width: 1000px; height: 50px; positive:} input { width: 50px ; Height: 50px; OPACITY: 1; Display: None;} Input+Label {Display: BLOCK; Width: 50px; Height: 50px; Background: URL (IMG/2.png); CKGROUND-SIZE: 100%;} Input : checked+label {background: url (IMG/1.png); background-size: 100%;} </style> </head> <body> <div class = box1> <input type = checkbox n ame = ID = Input1 value =/> <label for = input1> </label> </div> <div class = box2> <input type = checkbox name = id =/> <label = input2> </l abel> < /div> <div class = box3> <input type = checkbox name = id = input3 value =/> <label for = input3> </label> </body> </html>The above is the operation method of the check box in the HTML page introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!