How to Show or hide div's inside a Container based on CheckBox selection

Question

I am trying to show the values based on Checkbox check and uncheck

For example if Show All Maths Checkbox is selected , i want to display all the pack-panel for which Maths is selected

Similarly if Show All Physics Checkbox is selected , i want to display all the pack-panel for which Physiscs is selected

I have tried it this way

$(document).on('change', '.filtermaths', function() {
 $(".pack-panel").each(function () {
    var visible = $(this).find('.mathscheckbox').prop('checked')
   $(this).toggle(visible);
  });
  });


$(document).on('change', '.filterphysics', function() {
 $(".pack-panel").each(function () {
    var visible = $(this).find('.physicscheckbox').prop('checked')
   $(this).toggle(visible);
  });
  });

  $(document).on('change', '.filterchemistry', function() {
 $(".pack-panel").each(function () {
    var visible = $(this).find('.chemistrycheckbox').prop('checked')
   $(this).toggle(visible);
  });
  });

But this is not working as expected

This is my fiddle

http://jsfiddle.net/cod7ceho/135/

Could you please let me know how to fix this

Answer 1

You could try something like this.

$(document).on("change", ".actions", function(event) {
  if ($("input[name='includeAll']:checked").val() === "OR") {
    if ($("input:checked", $(".actions")).length === 0) {
      $(".pack-panel").addClass("visible").removeClass("hidden");
    } else {
      $(".pack-panel").addClass("hidden");
    }

    $("input:checked", $(".actions")).each(function() {
      var $target = $(this);
      var isChecked = $target.prop("checked");
      var value = $target.data("course-flag");

      if (isChecked) {
        $("." + value + "-checkbox:checked").closest(".pack-panel").addClass("visible").removeClass("hidden");
      }
    });
  } else {

    var selectedCourses = [];

    $("input:checked", $(".actions")).each(function() {
      selectedCourses.push($(this).data("course-flag"));
    });

    selectAll(selectedCourses);
  }


});

function selectAll(courses) {

  $(".pack-panel").each(function() {
    var $panel = $(this);
    var allSelected = true;
    courses.forEach(function(course) {

      if ($panel.find("." + course + "-checkbox:checked").length === 0) {
        allSelected = false;
      }
    });

    if (allSelected) {
      $panel.addClass("visible").removeClass("hidden");
    } else {
      $panel.removeClass("visible").addClass("hidden");
    }
  });
}

.visible {
  display: block;
}
.hidden {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>

  <input type="radio" value="AND" name="includeAll" checked/>AND
</label>
<label>
  <input type="radio" value="OR" name="includeAll" />OR
</label>
<div class="row">
  <div class="col-lg-9 actions">
    <label class="mt-checkbox mt-checkbox-outline">
      <input class="filtermaths" data-course-flag="maths" type="checkbox">Show All Maths<span></span>
    </label>
    <label class="mt-checkbox mt-checkbox-outline">
      <input class="filterphysics" type="checkbox" data-course-flag="physics">Show All Physics<span></span>
    </label>
    <label class="mt-checkbox mt-checkbox-outline">
      <input class="filterchemistry" type="checkbox" data-course-flag="chemistry">Show All Chemistry<span></span>
    </label>
  </div>
  <hr>


  <div class="sortable col-lg-12" id="pacstable">
    <div class="portlet portlet-sortable light bordered pack-panel">
      <div class="portlet-title">
        <div class="row">
          <div class="col-md-7">
            <div class="packdtsl">
              <div class="packimg"></div>
              <ul>
                <li>
                  <span class="title pac_inner">Student Name:</span>
                  <span>
                           <h1 class="studentname">Mark</h1>
                        </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-2">
            <div class="packrow">

            </div>
          </div>
          <div class="col-md-3">
            <div class="packrow">
              <ul>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="maths-checkbox" value="maths" type="checkbox" checked="">Maths<span></span>
                  </label>
                </li>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="physics-checkbox" value="physics" type="checkbox" checked="">Physics<span></span>
                  </label>
                </li>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="chemistry-checkbox" value="chemistry" type="checkbox" checked="">Chemistry<span></span>
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="portlet portlet-sortable light bordered pack-panel">
      <div class="portlet-title">
        <div class="row">
          <div class="col-md-7">
            <div class="packdtsl">
              <div class="packimg"></div>
              <ul>
                <li>
                  <span class="title pac_inner">Student Name:</span>
                  <span>
                           <h1 class="studentname">Micheal</h1>
                        </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-2">
            <div class="packrow">
            </div>
          </div>
          <div class="col-md-3">
            <div class="packrow">
              <ul>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="maths-checkbox" value="maths" type="checkbox" checked="">Maths<span></span>
                  </label>
                </li>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="physics-checkbox" value="physics" type="checkbox" checked="">Physics<span></span>
                  </label>
                </li>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="chemistry-checkbox" value="chemistry" type="checkbox" unchecked="">Chemistry<span></span>
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="portlet portlet-sortable light bordered pack-panel">
      <div class="portlet-title">
        <div class="row">
          <div class="col-md-7">
            <div class="packdtsl">
              <div class="packimg"></div>
              <ul>
                <li>
                  <span class="title pac_inner">Student Name:</span>
                  <span>
                           <h1 class="studentname">Roger</h1>
                        </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-2">
            <div class="packrow">
            </div>
          </div>
          <div class="col-md-3">
            <div class="packrow">
              <ul>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="maths-checkbox" value="maths" type="checkbox" checked="">Maths<span></span>
                  </label>
                </li>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="physics-checkbox" value="physics" type="checkbox" unchecked="">Physics<span></span>
                  </label>
                </li>
                <li>
                  <label class="mt-checkbox mt-checkbox-outline">
                    <input class="chemistry-checkbox" value="chemistry" type="checkbox" unchecked="">Chemistry<span></span>
                  </label>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I modified the markup a bit to have the look ups from checkboxes selection at the top to the ones inside the pack panels.

Modified the code to accommodate both OR and AND conditions. This should solve your problem.

Answer 2

try this shortest code

$('.actions input').on('change', function () {
    if ($('.actions input:checked').length <= 0)
        $(".pack-panel").show();
    else {
        $(".pack-panel").show();
        $('.actions input:checked').each(function () {
            var cclass = $(this).attr('class').split('filter')[1] + "checkbox";                    
            $('.' + cclass).each(function () {                            
                if(!$(this).prop('checked')){
                    $(this).parents('.pack-panel').hide();
                }
            });
        });
    }
});