取消隐藏/隐藏复选框中的值并使用javascript对它们进行分组

Question

您好我有这个复选框，我想让它们成为组并隐藏和取消隐藏每个内容。例如，当我首先加载页面所有CARS 将默认设置为已选中。如果我检查例如：CARS所有选中的复选框将被隐藏。并且仅显示已连接其自身div的 CARS 。如果我取消选中 CARS ，它将自动检查 ALL CARS 作为默认值

现在这是我的代码：

<legend>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-all" active>ALL CARS
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-cars" id = "select-cars" class = "select-cars  ">CARS
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-vans" id = "select-vans" class = "select-vans">VANS & PICKUP
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-suv" id = "select-suv" class = "select-suv">SUV & CROSSOVER
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-mpv" id = "select-mpv" class = "select-mpv">MPV
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-hybrid" id = "select-hybrid" class = "select-hybrid">HYBRID
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" value="select-performance" id = "select-performance" class = "select-performance">PERFORMANCE
    </label>
</legend>

这是我尝试过的javascript。它正在工作，但这还不够。

$('.select-cars').change(function () {
    if (!this.checked) 
    //  ^
       $('.type-cars').fadeOut('slow');

    else 
        $('.type-cars').fadeIn('slow');
});

UDPATE

这是我想要隐藏的每个复选框下的div。

<div class = "type-cars"></div>
<div class = "type-mpv"></div>
<div class = "type-suv"></div>
<div class = "type-van"></div>
<div class = "type-hybrid"></div>
<div class = "type-performance"></div>

Answer 1

让我们从您的if condition

开始

1. 错误检查您无法选择此类!this这样的内容$(this)
2. jquery中你的条件语法完全错误写了这样的if(condition){//some action} else {//some action which is not meet your if condition}
3. 更新：3 表示OP的新要求

if ($(".select-allcars").prop('checked')) { // this if checking all car selected or nor when page load if yeas show all div
  $('.customdiv').css('visibility', 'visible');
}
$('input[type="checkbox"]').click(function() {
  selectedtype = $(this).val(); //this is selecting checked checkbox value when clicked on it
  long = $('input[type="checkbox"]:checked').length; // this is checked checkbox lenght 

  $('.customdiv').css('visibility', 'hidden'); // when you click it it hides all div
  if ($(this).prop('checked')) {  // this is checking if that checkbox checked or not
    $(".select-allcars").prop('checked', false); // if checked it uncheck all cars checkbox
    $('.' + selectedtype).addClass('visible') // in earlier mention this put value of checked checkbox in that select so we can select class of which one we checked then we give visible class of we select
  } else {
    if (long == 0) {// this is checking how many checkbox selected if its 0 it shows all div with checking all cars checkbox
      $('.select-allcars').prop('checked', true);
      $('.customdiv').css('visibility', 'visible');
    }
    $('.' + selectedtype).removeClass('visible')// this is removing visible class if checked checkbox lengh is not 0

  }



  if ($(this).hasClass('select-allcars')) { // when we click all cars check box its checking its class which is select-allcars if yes i unchecked all checked checkboxes and checking all cars checkbox also showing all div
    $('input').prop('checked', false);
    $('.select-allcars').prop('checked', true);
    $('.customdiv').css('visibility', 'visible');
  }
});

#myBttn {
  text-align: center;
  background: unset;
  border: unset;
}

.customdiv {
  visibility: hidden;
}

.visible {
  visibility: visible !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend>
  <label class="checkbox-inline">
    <input type="checkbox" value="select-all" checked class='select-allcars'>ALL CARS
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" value="type-cars" id="select-cars" class="select-cars  ">CARS
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" value="type-van" id="select-vans" class="select-vans">VANS & PICKUP
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" value="type-suv" id="select-suv" class="select-suv">SUV & CROSSOVER
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" value="type-mpv" id="select-mpv" class="select-mpv">MPV
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" value="type-hybrid" id="select-hybrid" class="select-hybrid">HYBRID
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" value="type-performance" id="select-performance" class="select-performance">PERFORMANCE
  </label>
</legend>
<div class="customdiv type-cars">cars pics</div>
<div class="customdiv type-mpv">mpv pics</div>
<div class="customdiv type-suv">suv pics</div>
<div class="customdiv type-van">van pics</div>
<div class="customdiv type-hybrid">hybrid pics</div>
<div class="customdiv type-performance">performance pics</div>
<div class="">div which is on your somewhere in your html no hide</div>
<div class="">div which is on your somewhere in your html no hide</div>