Use JavaScript to complete the selection and cancellation of all forms

<! DOCTYPE html > 
< html > 
    < head > 
        < meta charset ="utf-8"  /> 
        < title > Use JavaScript to achieve all selection and cancellation </ title > 
        < script > 
            // Select all checkboxes to judge each sub Whether the checked value of the checkbox is the same as the value of the all checkbox 
            function chooseAll()
            {
               var flag=document.getElementById("all").checked;
               for(var i=1;i<=4;i++)
               {
                  document.getElementById("c"+i).checked=flag;
               }
            }
            function chooseNum(num)
            {
                 var flag = document.getElementById( " c " + num).checked;
                  // Whether all the sub-check boxes are checked, so as to determine whether the value of all check boxes is checked. 
                 CheckAll();
            }
            function checkAll ()
            {
                var isFlag = true ;
                for ( var i = 1 ; i <= 4 ; i ++ )
                {
                    var flag=document.getElementById("c"+i).checked;
                    if(flag==false)
                    {
                       isFlag = false ;
                    }
                }
                if(isFlag)
                {
                    document.getElementById("all").checked=true;
                }
                else
                {
                    document.getElementById("all").checked=false;
                }
            }
        </script>
        <style type="text/css">
         td
         {
           width:150px;
           font-size:15px;
           text-align:center;
         }
         input
         {
           text-align:center;
         }
        </style>
    </head>
    <body>
        <div align="center">
            <form action="" method="post" >
                <table border="1px" width="500px"height="50px" align="center">
                    <thead>
                        <tr>
                            <th><input type="checkbox"id ="all"   onclick ="chooseAll()" /></ th > 
                            < th > product name </ th > 
                            < th > product price </ th > 
                            < th > quantity purchased </ th > 
                            < th > total product price </ th > 
                        </ tr > 
                    </ thead >
                    
                    <tbody>
                        <tr>
                            <td><input type="checkbox" id="c1" onclick="chooseNum(1)"/></td>
                            <td>华为P20</td>
                            <td>4500</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="c2" onclick="chooseNum(2)"/></td>
                            <td>iphoneX</td>
                            <td>8000</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="c3" onclick="chooseNum(3)"/></td>
                            <td>小米6</td>
                            <td>2399</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" id="c4" onclick="chooseNum(4)"/></td>
                            <td>OPPOR11</td>
                            <td>1899</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </body>
</html>>
View Code
Use JavaScript to complete the selection and cancellation of all forms

Guess you like
