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）。

现在我还要添加一个名为“all”的复选框。这是默认状态，需要显示所有带有“.item”类的div。当选中其中一个复选框时，需要取消选中“全部”并仅显示与选中复选框同名的div。我也想让它以相反的方式工作。如果未选中所有内容，则应自动检查所有内容（否则不会显示div）。

我自己尝试的是给所有.item divs一个额外的类（'.all'）。全部复选框也具有值'all'，但由于某种原因，这不能正常工作。

Answer 1

看，它的圣诞节和圣诞老人带来了一些代码！

HTML

sys.getsizeof()

的JavaScript

<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>

Use this fiddle to play around，但下次你应该提供更多代码来防止“我不是你的codemonkey”的感觉：）

Answer 2

您还可以使用array和map。可以帮助fiddle

JS：

＆＃13;

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","");
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

这是一种主要使用jQuery方法的方法（加上this.checked DOM方法的非常轻松的缩小）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: