lundi 19 avril 2021

Input form checkboxes should manage table rows appearance with jQuery

Please help me with jQuery settings on checkboxes checked or unchecked status management. I made three groups of checkboxes with title checkbox on every group and 'Select all' checkbox. Below these checkboxes there is the table containing rows with info corresponding to checkboxes. Every checkbox should make corresponding table rows hidden or visible according to the checkbox status.

Screenshot here

The goal is correct checkboxes interaction with table rows apperance.

  1. By default all checkboxes should be checked and all the rows of table below checkboxes should be visible.
  2. When I click 'Select all' checkbox all the checkboxes should be unchecked and all the table rows should be hidden. Repeated click on 'Select all' checkbox should check all the checkboxes back and make all the table rows below visible.
  3. When all the checkboxes are checked and all the table rows below are visible and I check any of device checkboxes (e.g. 'ZONT LITE'), the 'Select all' checkbox should be unchecked, head title checkbox (in this case 'Thermostats') should be unchecked and corresponding table row below containing info about 'ZONT LITE' device should be hidden. Repeated click on 'ZONT LITE' checkbox should check 'Thermostats' and 'Select all' checkboxes back and make 'ZONT LITE' table row bwlow visible.
  4. When I check any of head title checkboxes (e.g.'Controllers') all the checkboxes below it (in this case 'ZONT SMART 2.0', 'ZONT H1000+' and 'ZONT H2000+') should be unchecked, 'Select all' checkbox should be unchecked and corresponding table rows below (containing info about 'ZONT SMART 2.0', 'ZONT H1000+' and 'ZONT H2000+') should be hidden. Repeated click on 'Controllers' checkbox should check all the checkboxes in its group, 'Select all' checkbox and make table rows 'ZONT SMART 2.0', 'ZONT H1000+' and 'ZONT H2000+' below visible back.
  5. In unchecked state the 'Select all' checkboxes while clicked should check all the checkboxes ain all groups and their titles.
$(function() {
  $('#all-choice-checkboxes input').on('change', function() {
    if ($('.pribor-choice-termostat input:checked').length == $('.pribor-choice-termostat input').length && $('.pribor-choice-regulator input:checked').length == $('.pribor-choice-regulator input').length && $('.pribor-choice-controller input:checked').length == $('.pribor-choice-controller input').length) {

      $('.all-choice-block-title input[type="checkbox"]').prop('checked', true);
    } else {

      $('.all-choice-block-title input[type="checkbox"]').prop('checked', false);
    }
  });

  $('.all-choice-block-title input[type="checkbox"]').click(function() {
    $('.termostat-choice-block-title input').click();
    $('.regulator-choice-block-title input').click();
    $('.controller-choice-block-title input').click();
  });



  $(".controller-choice-block-title input").click(function() {
    $("#controllers-checkboxes input").click();
  });
  $("#controllers-checkboxes input").change(function() {
    if (!$(this).prop("checked")) {
      $(".controller-choice-block-title input").click();
    }
  });

  $('#controllers-checkboxes input').on('change', function() {
    if ($('#controllers-checkboxes input:checked').length == $('#controllers-checkboxes input').length) {
      $('.controller-choice-block-title input[type="checkbox"]').prop('checked', true);
    } else {
      $('.controller-choice-block-title input[type="checkbox"]').prop('checked', false);
    }
  });



  $(".regulator-choice-block-title input").click(function() {
    $("#regulators-checkboxes input").click();
  });
  $("#regulators-checkboxes input").change(function() {
    if (!$(this).prop("checked")) {
      $(".regulator-choice-block-title input").click();
    }
  });

  $('#regulators-checkboxes input').on('change', function() {
    if ($('#regulators-checkboxes input:checked').length == $('#regulators-checkboxes input').length) {
      $('.regulator-choice-block-title input[type="checkbox"]').prop('checked', true);
    } else {
      $('.regulator-choice-block-title input[type="checkbox"]').prop('checked', false);
    }
  });




  $(".termostat-choice-block-title input").click(function() {

    $("#termostats-checkboxes input").click();
  });
  $("#termostats-checkboxes input").change(function() {
    if (!$(this).prop("checked")) {

      $(".termostat-choice-block-title input").click();
    }
  });

  $('.pribor-choice-termostat input').on('change', function() {
    if ($('#termostats-checkboxes input:checked').length == $('#termostats-checkboxes input').length) {
      $('.termostat-choice-block-title input[type="checkbox"]').prop('checked', true);
    } else {
      $('.termostat-choice-block-title input[type="checkbox"]').prop('checked', false);
    }
  });


  $('input[type="checkbox"]').click(function() {
    if ($(this).prop("checked") == true) {
      $($(this).data('id')).show();
    } else if ($(this).prop("checked") == false) {
      $($(this).data('id')).hide();

    }
  });

  $('.all-choice-block-title input').click();
  $('#boiler-compatability-table tbody tr').css("display", "");
});
#boiler-compatability-table {
  padding: 30px 0 0 0;
}

table {
  width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: medium none;
  vertical-align: middle;
}

.boiler-table-interfaces {
  font-size: 16px;
  color: #1e1e1e;
}

table tbody tr,
table thead tr {
  border: 1px solid #e6e6e6;
}

.pribor-choice-termostat {
  width: 200px;
  float: left;
  min-height: 100px;
  padding: 0 20px 0 0;
}

.pribor-choice-regulator {
  padding: 0 20px 0 0;
  width: 200px;
  float: left;
}

.pribor-choice-controller {
  padding: 0 20px 0 0;
  width: 200px;
  float: left;
}

.choice-block-title {
  font-size: 16px;
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="all-choice-checkboxes" style="">


  <!-- термостаты-->
  <div class="pribor-choice-termostat">
    <div class="choice-block-title termostat-choice-block-title">
      <input type="checkbox">Thermostats
    </div>

    <div id="termostats-checkboxes">
      <div><input type="checkbox" data-id="#1112">ZONT LITE</div>
      <div><input type="checkbox" data-id="#8721">ZONT H-1</div>
      <div><input type="checkbox" data-id="#40838">ZONT H-2</div>
      <div><input type="checkbox" data-id="#8718">ZONT H-1V</div>
      <div><input type="checkbox" data-id="#208725">ZONT H-1V.01</div>
      <div><input type="checkbox" data-id="#7384">ZONT SMART</div>
      <div><input type="checkbox" data-id="#19340">ZONT SMART 2.0</div>
    </div>
  </div>


  <!-- регуляторы-->
  <div class="pribor-choice-regulator">
    <div class="choice-block-title regulator-choice-block-title">
      <input type="checkbox">Regulators
    </div>

    <div id="regulators-checkboxes">
      <div><input type="checkbox" data-id="#133599">ZONT Climatic OPTIMA</div>
      <div><input type="checkbox" data-id="#19144">ZONT Climatic 1.1</div>
      <div><input type="checkbox" data-id="#19143">ZONT Climatic 1.2</div>
      <div><input type="checkbox" data-id="#19145">ZONT Climatic 1.3</div>
    </div>
  </div>


  <!-- контроллеры-->
  <div class="pribor-choice-controller">
    <div class="choice-block-title controller-choice-block-title">
      <input type="checkbox">Controllers
    </div>


    <div id="controllers-checkboxes">
      <div><input type="checkbox" data-id="#19340">ZONT SMART 2.0</div>
      <div><input type="checkbox" data-id="#41775">ZONT H1000+</div>
      <div><input type="checkbox" data-id="#9175">ZONT H2000+</div>
    </div>


  </div>
  <!-- Выбрать все-->
  <div class="pribor-choice-all">
    <div class="choice-block-title all-choice-block-title">
      <input type="checkbox">Select all
    </div>

  </div>

  <div class="clearfix"></div>
</div>


<table id="boiler-compatability-table">
  <tbody>
    <tr class="boiler-table-interfaces">
      <td>Device</td>
      <td colspan="3">Control type</td>
    </tr>
    <tr class="boiler-table-interfaces">
      <td></td>
      <td class="boiler-table-interfaces__interface"><b>Relay</b>
        <span class="ml-3">
          <i class="icon icon-question"></i>
        </span>
      </td>
      <td class="boiler-table-interfaces__interface"><b>Digital Bus</b>
        <span class="ml-3">
          <i class="icon icon-question"></i>
        </span><br>
        <span class="boiler-table-interfaces__comment">through adapter</span>
      </td>
      <td class="boiler-table-interfaces__interface"><b>Digital Bus</b>
        <span class="ml-3">
          <i class="icon icon-question"></i>
        </span><br>
        <span class="boiler-table-interfaces__comment">through internal protocol</span>
      </td>
    </tr>


    <tr id="1112" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="1112" class="quick_view button">ZONT LITE</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="8721" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="8721" class="quick_view button">ZONT H-1</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="40838" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="40838" class="quick_view button">ZONT H-2</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="8718" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="8718" class="quick_view button">ZONT H-1V</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="208725" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="208725" class="quick_view button">ZONT H-1V.01</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="7384" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="7384" class="quick_view button">ZONT SMART</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="19340" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="19340" class="quick_view button">ZONT SMART 2.0</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="133599" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="133599" class="quick_view button">ZONT Climatic OPTIMA</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="19144" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="19144" class="quick_view button">ZONT Climatic 1.1</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="19143" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="19143" class="quick_view button">ZONT Climatic 1.2</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="19145" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="19145" class="quick_view button">ZONT Climatic 1.3</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="41775" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="41775" class="quick_view button">ZONT H1000+</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-minus">-</span><br></td>
    </tr>
    <tr id="9175" style="" class="pribor-zont-item">
      <td class="boiler-title"><a data-product-id="9175" class="quick_view button">ZONT H2000+</a></td>
      <td class="boiler-interface releino"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
      <td class="boiler-interface"><span class="boiler-plus">+</span><br></td>
    </tr>
  </tbody>
</table>

Here is the code in jsfiddle: https://jsfiddle.net/pashikk2008/fk9ubet4/17/




Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)