JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<table id="gdRows" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;font-family:Arial;font-size:Small;width:80%;border-collapse:collapse;">
        <tr align="left" style="background-color:Tan;font-weight:bold;">
            <th scope="col">
                        <input id="gdRows_ctl01_chkParent" type="checkbox" name="gdRows$ctl01$chkParent" />
                    </th><th scope="col">ID</th><th scope="col">Product Name</th><th scope="col">Quantity</th><th scope="col">Price</th>
        </tr><tr align="left">
            <td>
                        <input id="gdRows_ctl02_chkSelect" type="checkbox" name="gdRows$ctl02$chkSelect" />
                    </td><td>1</td><td>Mouse</td><td>10</td><td>100</td>
        </tr><tr align="left" style="background-color:PaleGoldenrod;">
            <td>
                        <input id="gdRows_ctl03_chkSelect" type="checkbox" name="gdRows$ctl03$chkSelect" />
                    </td><td>2</td><td>Speaker</td><td>15</td><td>990</td>
        </tr><tr align="left">
            <td>
                        <input id="gdRows_ctl04_chkSelect" type="checkbox" name="gdRows$ctl04$chkSelect" />
                    </td><td>3</td><td>Hard Drive</td><td>35</td><td>3990</td>
        </tr><tr align="left" style="background-color:PaleGoldenrod;">
            <td>
                        <input id="gdRows_ctl05_chkSelect" type="checkbox" name="gdRows$ctl05$chkSelect" />
                    </td><td>4</td><td>RAM</td><td>22</td><td>399</td>
        </tr><tr align="left">
            <td>
                        <input id="gdRows_ctl06_chkSelect" type="checkbox" name="gdRows$ctl06$chkSelect" />
                    </td><td>5</td><td>Wireless Keyboard</td><td>10</td><td>3500</td>
        </tr><tr align="left" style="background-color:PaleGoldenrod;">
            <td>
                        <input id="gdRows_ctl07_chkSelect" type="checkbox" name="gdRows$ctl07$chkSelect" />
         ...

CSS

body
{
    padding:10px;
}

td
{
    padding:6px;
}
th
{
    padding:6px;
    font-weight:bold;
}

JavaScript

$(document).ready(function() {
      $('#gdRows').find('input:checkbox[id$="chkParent"]').click(function() {
    var isChecked = $(this).prop("checked");
    $("#gdRows [id*=chkSelect]:checkbox").prop('checked', isChecked);
});

$('#gdRows').find('input:checkbox[id$="chkSelect"]').click(function() {
   var flag = true;
    $("#gdRows [id*=chkSelect]:checkbox").each(function() {
         if ($(this).prop("checked") == false) flag = false;
    });
    $("#gdRows [id*=chkParent]:checkbox").prop('checked', flag);
  });
});