Select and anti-election cases

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px Solid # C0C0C0; 
            width: 300px by; 
        } 

        TH, 
        TD { 
            border: 1px Solid # d0d0d0; 
            Color: # 404.06 thousand ; 
            padding: 10px; 
        } 

        TH { 
            background - Color: # 09C; 
            font: Bold 16px " Microsoft yahei " ; 
            Color: #fff; 
        } 

        TD { 
            font: 14px " Microsoft yahei " ; 
        } 

        tbody TR { 
            background -color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
  <div class="wrap">
      <table>
          <thead>
            <tr>
                <th>
                    <input type="checkbox" id="j_cbAll" />
                </th>
                <th>商品</th>
            </ TR>
                <th> price </ TH>
          </thead>
          <tbody id="j_tb">
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPhone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>iPad Air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>

          </tbody>
      </table>
      <input type="button"= value "   Invert   " ID = " BTN " > 
  </ div> 
  <Script> var j_tb = document.getElementById ( ' j_tb ' );
      var Inputs = j_tb.getElementsByTagName ( ' INPUT ' );
      // . 1 Select
      // 1.1 get the parent checkbox, registration click event var j_cbAll = document.getElementById ( ' j_cbAll ' ); 
     j_cbAll.onclick = function () {
        // 1.2 Find all sub checkbox, so that the status of these checkbox is consistent with the parent checkbox for (
     
     
      
        var I = 0 ; I <inputs.length; I ++ ) {
          var INPUT = Inputs [I];
          IF (input.type === ' checkbox ' ) {
           //Let the child selected checkbox, consistent and parent checkbox is checked 
           the INPUT. The checked = the this . The checked ; 
         } 
       } 
     } 
     
     // 2 when the child clicks the checkbox, if all the child's checkbox are selected, let checkbox Father also selected
      // If there is a child of the checkbox is not checked, the parent nor the checkbox is checked 
     
     // cycle here, is to traverse all the sub checkbox, the click event registration 
     for ( var i = 0; I <inputs.length; I ++ ) {
        var INPUT = Inputs [I];
        // determines whether CheckBox 
       IF ! (Input.type == ' CheckBox ' ) {
         // end of the current cycle, the next cycle continues 
         Continue ; 
       } 
       // checkbox click event to register sub 
       input.onclick = function () { 
         checkAllCheckBox (); 
       } 
     } 
     

     // status determination of the parent package as a function of the checkbox 
     function checkAllCheckBox () {
        // assume that all sub checkbox are selected the 
         var isAllChecked = to true ;
          //Determining whether all the sub checkbox are selected 
         for ( var I = 0 ; I <inputs.length; I ++ ) {
            var INPUT = Inputs [I];
            IF (! Input.type == ' checkbox' ) {
              Continue ; 
           } 
           // determines whether all current checkbox are selected 
           IF (INPUT!. The checked ) { 
             isAllChecked = to false ; 
           } 
         } 
         // set the state of the parent checkbox 
         j_cbAll. The checked = isAllChecked; 
     } 

     // . 3 unselected
      // 3.1 to invert the selection button to register the click event 
     var btn = document.getElementById ( ' btn ' ); 
     btn.onclick = function () {
         // 3.2 checkbox to find all the child, let the anti-election
        for ( var I = 0 ; I <inputs.length; I ++ ) {
           var INPUT = Inputs [I];
           // determines whether CheckBox 
          IF (! input.type == ' CheckBox ' ) {
             Continue ; 
          } 
          // handicap checkbox is unselected  
          input .the checked = INPUT!. the checked ;
           // set the state of the parent checkbox 
          checkAllCheckBox (); 
        } 
     }
    
     
   </ Script> 
</ body> 
</ HTML>
Select and anti-election cases

Guess you like
