How to operate checkboxes in HTML pages-HTML Tutorial-php.cn

How to operate checkboxes in HTML pages

高洛峰

Release： 2017-02-09 17:50:00

Original

1909 people have browsed it

Checkboxes are very common on web pages. Whether it is an e-commerce website or a platform, you will see checks wherever there is a need to choose. Next, there are two small demos I wrote before, both about check boxes. I hope they will be helpful to everyone.

The first one is about the operation of selecting all check boxes and inverting the selection. Of course, I also added a small function in it, that is, when the check boxes of Shangpin or other things below are all selected. Then the Select All button also becomes selected; vice versa.

<!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>

Copy after login

The second one is to customize the checkbox style, that is, we can replace our checkboxes with pictures to add a cool touch The effect; and here I am completely using CSS3 writing method, no JavaScript is involved;

<!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>

Copy after login

The above is the HTML page that the editor introduces to you. I hope this method of operating the box will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

For more related articles on how to operate check boxes in HTML pages, please pay attention to the PHP Chinese website!