Javascript Check Box

Question

I’m doing maintenance on a system, and I found the following code:

$(".MinhaClass").die();
$(".MinhaClass").live('click', function () {
    // Código
}

.MinhaClass refers to a list of checkbox. I was tasked to add at the beginning of the list a checkbox to select All the list items. I soon thought about doing:

$("#selecionar-todos").change(function () {
      $('#lista input:checkbox').each(function () {
           $(this).click();
      });
});

Soon the system would behave the same way as before, without many changes.

When you click on all, all items in the list are checked, including the "Select All" checkbox itself, but when you click on an item individually, it is unchecked and the "Select All" checkbox must also be unchecked.

For this, it would be necessary to identify in the first code where the click action comes from, if it was called by the method I created or if it was triggered by the mouse click individually.

I have this Fiddle to explain better.

Note: The problem is that the Select All checkbox should only be marked when all items are marked, if any unchecked, checkbox select all also must be unchecked...

Answer 1

Change the code to

$(function(){
  $("#selecionar-todos").change(function() {
    $("#lista input:checkbox").prop('checked', this.checked);
  });
  $("#lista input:checkbox").change(function() {
    if (!this.checked) { // se desmarcou, limpa "selecionar todos"
      $("#selecionar-todos").prop('checked', false);
    }
  });
});

label {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label><input id="selecionar-todos" type="checkbox"/>Selecionar Todos</label>
<div id="lista">
    <label><input name="itens" type="checkbox" value="1"/>Item1</label>
    <label><input name="itens" type="checkbox" value="2"/>Item2</label>
    <label><input name="itens" type="checkbox" value="3"/>Item3</label>
    <label><input name="itens" type="checkbox" value="4"/>Item4</label>
</div>

To assign the markup I used the native property checked instead of the event click (that toggles the selection), this property can be accessed with the function .prop() or directly if it is a native object (such as this.checked of the code)