Jquery根据选中的复选框显示特定元素

Question

我在检查具有相应名称的复选框时，我只尝试显示特定的div。

我目前有以下代码：

$(".checkbox").change(function () {
  var checkbox = $(this).val();

  if ($(".item").hasClass(checkbox)) {
      if ($(this).is(":checked")) {
          $(".item." + checkbox).show();
      } else {
          $(".item." + checkbox).hide();
      }
  }
});

上面的代码做了以下事情：当我选中一个名为“industry”的复选框时，它也会显示带有“.item .industry”类的div。然后，当我还选中名称为“office”的复选框时，它将显示所有 div 的类名称为“.industry”和“.office”（“.item .industry .office”）。

现在我还想添加一个名为“全部”的复选框。这是默认状态，需要显示所有具有“.item”类的 div。当检查其他一个复选框时，需要取消选中“全”并仅显示具有与选中复选框相同的div。我也希望这反过来工作。当一切都未选中时，它应该自动检查所有（否则不会显示 div）。

我自己尝试的是给所有的 .item div 一个额外的类（'.all'）。 all 复选框的值也为“all”，但由于某种原因，它无法正常工作。

Answer 1

看，圣诞节和圣诞老人​​带来了一些密码！

HTML

<div>
  <label for="industry">
    Industry
    <input class="checkbox single" type="checkbox" value="industry" name="industry" id="industry" checked>
  </label>
  <label for="office">
    Office
    <input class="checkbox single" type="checkbox" value="office" name="office" id="office" checked>
  </label>
  <label for="all">
    All
    <input class="checkbox all" type="checkbox" value="all" name="all" id="all" checked>
  </label>
</div>

<div class="item industry">
  <h4>
   Industry
  </h4>
</div>
<div class="item office">
  <h4>
    Office
  </h4>
</div>

JavaScript

$(".checkbox").change(function() {
  var $self       = $(this),
      checkboxVal = $self.val(),
      selector    = checkboxVal === "all" ? ".item" : ".item." + checkboxVal;

  // Show or hide divs based on selector, for example:
  // $(".item").show() will show all items while
  // $(".item.industry").show() will only show the industry div
  if ($self.is(":checked")) {
    $(selector).show();
  } else {
    $(selector).hide();
  }

  // This part is optional but it feels awkward without.
  // If the changed checkbox is the "all" checkbox, we want all checkboxes
  // to be checked. Vice versa if we click a single checkbox we want
  // the "all" checkbox to react accordingly
  if (checkboxVal === "all") {
    $(".checkbox.single").prop("checked", $self.is(":checked"));
  } else {
    if ($(".checkbox.single:checked").length === $(".checkbox.single").length) {
      $(".checkbox.all").prop("checked", true);
    } else {
      $(".checkbox.all").prop("checked", false);
    }
  }
});

Use this fiddle to play around，但下次你应该提供更多代码来防止“我不是你的密码猴子”的感觉:)

Answer 2

您也可以使用array 和map。愿它帮助fiddle

JS：

var array = $("input[type='checkbox']").map(function(){
  if($(this).val() != 'all')
  return $(this).val(); 
  else 
  return null;
  });
  
$("input[type='checkbox']").change(function () {
  var checkbox = $(this).val();
  var count = 0;
  if ($(".item").hasClass(checkbox)) {
      if ($(this).is(":checked")) {
          $(".item." + checkbox).show();
      } else {
          $(".item." + checkbox).hide();
      }
  }
  else
  {
  if ($(this).is(":checked")) {
          $("input[type='checkbox']").prop("checked","checked");
  $("div").show();
      } else {
          $("input[type='checkbox']").prop("checked","");
  $("div").hide();
      }
  }
  
   $("input[type='checkbox']").each(function(){
  if($(this).is(':checked'))
  {
  if($.inArray( $(this).val(), array ) > -1)
  {
  count++;
  }
  }
  });
  
   if(array.length == count && checkbox !='all')
  {
  $("input[type='checkbox']").prop("checked","checked");
  $("div").show();
  }
  if(array.length > count)
  {
  $("input[type='checkbox'][value='all']").prop("checked","");
  }
});

.item{
  background-color:yellow;
  width:50px;
  height:50px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" value="all"/>
<input type="checkbox" value="industry"/>
<input type="checkbox" value="Company"/>
<input type="checkbox" value="mill"/>
<div class="item industry">
industry
</div>
<div class="item Company">
Company
</div>
<div class="item mill">
mill
</div>

Answer 3

这是一种主要使用 jQuery 方法的方法（加上少量的 this.checked DOM 方法）：

$(document).ready(function() {

    $('input[value="all"]').prop('checked', true);
    $('input[value^="box-"]').prop('checked', false);
    
    $('input[value^="box-"]').change(function(){
        $('input[value="all"]').prop('checked', false);

        $('input[value^="box-"]').each(function(){ 
            var uncheckedCount = 0;
            var checkValue = $(this).val();
            $('div').hide();

            $('input[value^="box-"]').each(function(){ 
                var box = $(this).val();
                if (this.checked) {
                    $('.' + box).show();
                }

                else {
                   uncheckedCount++;
                }

                if (uncheckedCount === $('input[value^="box-"]').length) {
                    $('input[value="all"]').prop('checked', true);
                    $('div').show();
                }
            }); 
        });
    });

    $('input[value="all"]').change(function(){
        $('input[value^="box-"]').prop('checked', false);
        $('input[value="all"]').prop('checked', true);
        $('div').show();
    });
});

div {
display: inline-block;
width:100px;
height:100px;
margin-top: 24px;
font-weight: bold;
text-align: center;
line-height: 100px;
color: rgb(255,255,255);
background-color:rgb(255,0,0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" value="all" checked />All
<input type="checkbox" value="box-a" />Box A
<input type="checkbox" value="box-b" />Box B
<input type="checkbox" value="box-c" />Box C
<br />

<div class="box-a">Box A Div</div>
<div class="box-b">Box B Div</div>
<div class="box-c">Box C Div</div>