JSFiddle - React, Tailwind, and code Playground

by Inderpreet Singh Jolly

HTML

<table class="tblfav" style="width:100%;">
          <tbody><tr>
            <th style="width:25%;" class="radius_first alignLeft"><label class="label_check c_off">
              <input type="checkbox" class="">
              </label>
              Favorites</th>
            <th style="width:38%;" class="alignLeft"> Products </th>
            <th style="width:36%;" class="radius_last bdrlft_none alignRight"> <a href="javascript:void(0);" class="txtsize ">Show Favorites Only</a></th>
          </tr>
          <tr>
            <td><label class="label_check c_on">
              <input type="checkbox" class="">
              </label>
            </td>
            <td><strong>Unified Communication</strong> </td>
            <td><a class="updated" href="">Updated</a></td>
          </tr>
          <tr>
            <td><label class="label_check c_on">
              <input type="checkbox" class="">
              </label>
            </td>
            <td>Connected Safety and Security</td>
            <td></td>
          </tr>
          <tr>
            <td><label class="label_check c_on">
              <input type="checkbox" class="">
              </label>
            </td>
            <td>Hosted Collaboration Solution </td>
            <td><a class="updated" href="">Updated</a></td>
          </tr>
          <tr>
            <td><label class="label_check c_on">
              <input type="checkbox" class="">
              </label>
            </td>
            <td>Stadium Vision</td>
            <td></td>
          </tr>
          <tr>
            <td><label class="label_check c_on">
              <input type="checkbox" class="">
              </label>
            </td>
            <td>Cisco VXI Smart Solution</td>
            <td></td>
          </tr>
          <tr>
          <td><label class="label_check c_on">
              <input type="checkbox" class="">
              </label>
            </td>
            <td>Cisco Remote Expert</td>
            <td></td>
        ...

JavaScript

$(".tblfav").find("th :checkbox").click(function () {					 
		if ($(this).is(":checked")){
            $(this).closest(".tblfav").find('td :checkbox').prop('checked', true).change(); // will uncheck the checkbox with id check1

        } else {
           $(this).closest(".tblfav").find('td :checkbox').prop('checked', false).change(); // will check the checkbox with id check1
        }
		
    });
	
	 $(".tblfav").find("td :checkbox").click(function() {
		console.log($(this).closest(".tblfav").find('td :checkbox').length+" == "+$(this).closest(".tblfav").find('td :checkbox:checked').length);
       if ($(this).closest(".tblfav").find("td :checkbox").length == $(this).closest(".tblfav").find("td :checkbox:checked").length) {
            $(this).closest(".tblfav").find('th :checkbox').prop('checked', true); // will uncheck the checkbox with id check1

        } else {
            $(this).closest(".tblfav").find('th :checkbox').prop('checked', false); // will check the checkbox with id check1
        }
    });