JS achieve the cart or select radio button function

JS For starters, a complete shopping cart is still quite hard to achieve, with a lot of logic functions. Write complete function, can improve a lot JS basis to implement the following cart or select radio button functions:

First HTML and CSS section:

        <style>
            table {
                border-collapse: collapse;
            }
            
            td {
                border: 1px solid #000000;
                width: 100px;
                height: 30px;
                text-align: center;
            }
        </style>

    <body>
        <table>
            <tr>
                <td>
                    <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check0" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check1" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check2" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check3" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check4" type="checkbox">
                </td>
            </tr>
        </table>

Then the JS part:

<Script>
             var allcheck = document.getElementById ( "allCheck" ) // Get full box 
            allcheck.addEventListener ( "the Click" , the clickHandler) // add to the whole box click button attribute
             for ( var I = 0; I <. 5 ; I ++ ) {
                 var Check = document.getElementById ( "Check" + I) // iterate through each radio button 
                check.addEventListener ( "the Click" , the clickHandler);// add attributes for each click on the checkbox 
            } 
            function clickHandler () {
                 IF (allcheck === the this ) {// judge if you click on the Select All button is selected so many buttons will all be selected
                     for ( var0 = I; I <. 5; I ++ ) {
                         var Check = document.getElementById ( "Check" + I);　　　　
                        check.checked = allcheck.checked; 
                    } 
                    return ; // End 
                } 
                for ( var J = 0; J <. 5 ; J ++ ) {
                     var Checks = document.getElementById ( "Check" + J);
                     IF ! ( checks.checked) {for this part of the code whether a multi-selection button is selected through all of the radio button is selected if there is more than one button is not select All button is selected then it will not be selected 
                        allcheck.checked = false ;
                         return ; // end
                    } 
                } 
                Allcheck.checked = to true ; // can not be understood can not read the code run step by step
             }
         </ Script>

All Code:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table {
                border-collapse: collapse;
            }
            
            td {
                border: 1px solid #000000;
                width: 100px;
                height: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check0" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check1" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check2" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check3" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="check4" type="checkbox">
                </td>
            </tr>
        </table>
        <script>
            var allcheck = document.getElementById("allCheck")
            allcheck.addEventListener("click",clickHandler)
            for(var i=0;i<5;i++){
                var check = document.getElementById("check"+i)
                check.addEventListener("click",clickHandler);
            }
            
            function clickHandler(){
                if(allcheck === this){
                    for(var i=0;i<5;i++){
                        var check = document.getElementById("check"+i);
                        check.checked = allcheck.checked;
                    }
                    return;
                }
                for(var j=0;j<5;j++){
                    var checks = document.getElementById("check"+j);
                    if(!checks.checked){
                        allcheck.checked = false;
                        return;
                    }
                }
                allcheck.checked = true;
            }
        </script>
    </body>
</html>

Results are as follows:

JS achieve the cart or select radio button function

Guess you like