Basj Basj - 6 months ago 38
Javascript Question

All / none checkbox

Why doesn't this "All / none" option do his job? I can't see why

.attr('checked', status);
doesn't toggle all the checkboxes.

And what's the most clever way to hide / show elements of
#main
belonging to selected categories?



$('input[name="all"]').click(function() {
var status = $(this).is(':checked');
alert(status);
$('input[type="checkbox"]').attr('checked', status);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class="cat1">Element of category1</div>
<div class="cat4">Element of category4</div>
<div class="cat3">Element of category3</div>
<div class="cat1">Element of category1</div>
<div class="cat2">Element of category2</div>
</div>

<label>
<input type="checkbox" name="all" checked="true">
All / none
</label>
<label>
<input type="checkbox" name="cat1" checked="true">
A
</label>
<label>
<input type="checkbox" name="cat2">
B
</label>
<label>
<input type="checkbox" name="cat3">
C
</label>
<label>
<input type="checkbox" name="cat4">
D
</label>




Answer

This sets the checkboxes and the div visibility as needed.

It uses opacity to simulate a grayed-out checkbox.

$('[name="all"]').click(function() {  //set all checkboxes to match All / none
  $(':checkbox')
    .prop('checked', this.checked)
    .change();
});

$('input')
  .change(function() {  //show divs corresponding to checked input
    var checked= $(':checkbox:not([name="all"]):checked').length;

    $('div.' + this.name)
      .toggle(this.checked);

    $('[name="all"]')
      .prop('checked', checked > 0)
      .toggleClass('someChecked', checked && checked<$(':checkbox:not([name="all"])').length);
  })
  .change();  //run the method immediately

$('[name="all"]').click(function() {  //set all checkboxes to match All / none
  $(':checkbox')
    .prop('checked', this.checked)
    .change();
});

$('input')
  .change(function() {  //show divs corresponding to checked input
    var checked= $(':checkbox:not([name="all"]):checked').length;
  
    $('div.' + this.name)
      .toggle(this.checked);

    $('[name="all"]')
      .prop('checked', checked > 0)
      .toggleClass('someChecked', checked && checked<$(':checkbox:not([name="all"])').length);
  })
  .change();  //run the method immediately
.someChecked {
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class="cat1">Element of category1</div>
  <div class="cat4">Element of category4</div>
  <div class="cat3">Element of category3</div>
  <div class="cat1">Element of category1</div>
  <div class="cat2">Element of category2</div>
</div>

<label>
  <input type="checkbox" name="all" checked="true">
  All / none
</label>
<label>
  <input type="checkbox" name="cat1" checked="true">
  A
</label>
<label>
  <input type="checkbox" name="cat2">
  B
</label>
<label>
  <input type="checkbox" name="cat3">
  C
</label>
<label>
  <input type="checkbox" name="cat4">
  D
</label>