如何根据CheckBox选择显示或隐藏Container内的div

时间：2016-10-03 14:29:54

标签： jquery

我正在尝试根据Checkbox检查并取消选中

来显示值

例如，如果显示所有数学复选框已选中，我想显示所有选择了数学的工作包面板

同样，如果显示所有物理复选框已选中，我想显示所有选择了Physisc的包面板

我试过这种方式

$(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);
  });
  });

但这不能按预期工作

这是我的小提琴

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

你能告诉我如何解决这个问题

3 个答案:

答案 0 :(得分：7)

你可以尝试这样的事情。

＆＃13;
＆＃13; 
$(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");
    }
  });
}
＆＃13; 
.visible {
  display: block;
}
.hidden {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我稍微修改了标记，以便从顶部的复选框选择到包装面板内的复选框进行查找。

修改代码以适应OR和AND条件。这应该可以解决你的问题。

答案 1 :(得分：4)

尝试这个最短的代码

$('.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();
                }
            });
        });
    }
});

答案 2 :(得分：1)

var fields = ['maths', 'physics', 'chemistry'];
var visible = {};

$('.actions input').on('change', function(){
    var atLeastOne = false;
    for(var field of fields){
        visible[field] = false;
        if($('.filter' + field).prop('checked')){
            visible[field] = true;
            atLeastOne = true;
        }
    }

    if(!atLeastOne){
        $(".pack-panel").show();
    }else{
        $(".pack-panel").hide();
        for(var field of fields){
            if(!visible[field]){ continue; }
            $(".pack-panel").each(function () {
                if($(this).is(':visible')) { return; }
                if($(this).find('.'+field+'checkbox').prop('checked')){
                    $(this).show();
                    return;
                }
            });
        }
    }
});
相关问题
最新问题