Question

我有5个使用jQuery的复选框我想根据复选框选择显示/隐藏div。但合并选定的复选框以构建单个查询。例如，如果用户选中weekly和small，我只想显示包含这两个类的div。不显示有一个或两个的div。

我知道我可以用一切可能的组合写一堆if语句，但我认为有更好的方法。目前，我根据每个选项单独显示/隐藏div single，而不是合并结果。

$short = $('input[name="short"]:checked').length > 0;
$weekly = $('input[name="weekly"]:checked').length > 0;
$small = $('input[name="small"]:checked').length > 0;
$medium = $('input[name="medium"]:checked').length > 0;
$big = $('input[name="big"]:checked').length > 0;

if( $all == false && $short == false && $weekly == false && $small == false && $medium == false && $big == false){

} else {
  $('.single').hide(); 

  if ($short == true) {
    $('.single.short').show();
  }
  if ($weekly == true) {
    $('.single.weekly').show();
  }
}

Answer 1

您可以根据checked复选框

创建有效的选择器

//Hide All elements
$('.single').hide();

//Get checked checkboxes
var checkedCheckboxes = $('input[name="short"],input[name="weekly"],input[name="small"],input[name="medium"],input[name="big"]').filter(':checked');

//If User has selected any checkbox
if (checkedCheckboxes.length) {
    //Get name
    var names = checkedCheckboxes.map(function () {
            return $(this).attr('name');
        }).get();

    //Create selector   
    var selector = '.' + names.join('.');

    //Show target elements
    $('.single' + selector).show();
}

Answer 2

你是说这个？

$('input[type="checkbox"]').on('change', function() {
  var show = [];
  $.each(["short", "weekly", "small"], function(_, aClass) {
    if ($('input[name="' + aClass + '"]').is(':checked')) show.push(aClass);
  });
  if (show.length > 0) {
    $(".commonClass").hide();
    console.log("." + show.join("."))
    $("." + show.join(".")).show();
  }

});

/* Thanks kapantzak */
.commonClass {
  display: inline-block;
  float: left;
  margin: 5px;
  padding: 5px;
  border: 1px solid #d8d8d8;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="short" /></label>Short<br />
<label><input type="checkbox" name="weekly" />Weekly</label><br />
<label><input type="checkbox" name="small" />Small</label>
<br />
<span class="commonClass short">.short</span>
<span class="commonClass weekly">.weekly</span>
<span class="commonClass small">.small</span>
<span class="commonClass short weekly">.short.weekly</span>
<span class="commonClass short small">.short.small</span>
<span class="commonClass short weekly small">.short.weekly.small</span>

Answer 3

$('input[type="checkbox"]').on('change', function() {
  var classes = [];
  var selectors = $('input[type="checkbox"]').filter(':checked').each(function() {
    classes.push($(this).val());
  });      
  $('.defaultClass').each(function() {
    var that = $(this);
    var show = true;
    for (var c in classes) {
      if (!that.hasClass(classes[c])) {
        show = false;
        break;
      }
    }
    if (show === true) {
      that.show();
    } else {
      that.hide();
    }
  });
});

.defaultClass {
  display: inline-block;
  float: left;
  margin: 5px;
  padding: 5px;
  border: 1px solid #d8d8d8;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One</label>:<input type="checkbox" value="one" /><br />
<label>Two</label>:<input type="checkbox" value="two" /><br />
<label>Three</label>:<input type="checkbox" value="three" />
<br />
<span class="defaultClass one">Span (.one)</span>
<span class="defaultClass two">Span (.two)</span>
<span class="defaultClass three">Span (.three)</span>
<span class="defaultClass one two">Span (.one.two)</span>
<span class="defaultClass one three">Span (.one.three)</span>
<span class="defaultClass one two three">Span (.one.two.three)</span>

使用复选框的jQuery组合过滤器

3 个答案: