How to make a Selectall checkbox

Question

I need to create a checkbox if it is selected it will select all others and if it is not selected others must also be deselected.

I tried to do something but it didn’t work. See:

$("#selectAll").on('checked', function () {
   $(".checkReunioes").each(function( index ) {
      $( this ).attr("check", "checked");
   });
});

Select all:

<li class="item item-checkbox colorCheck">
   <label class="checkbox checkbox-dark">
      <input type="checkbox" id="selectAll">
   </label>
   <div id="nameSelectAll"></div>
</li>

Remaining checkbox inputs are generated dynamically.

'<li class="item item-checkbox">'+
'  <label class="checkbox">'+
'       <input type="checkbox" class="checkReunioes">'+
'     </label>'+
'  <div data-uib="layout/card" data-ver="0">'+
((reunioes[i].COD_PESSO_LOCAL == "999") ? '<div class="">'+ reunioes[i].TXT_DESCR_ENDER +'</div>' : '<div class="">Casa '+ ((w_elemento == "M") ? "do " : "da ")+''+ reunioes[i].TXT_LOCAL_REUNI +' </div>')+
'   <div class="card_Data">'+DataInvertida+'</div>'+
'     <input id="codigoReuniao" value="'+reunioes[i].COD_IDENT_REUNI+'" hidden/>'+
'   </div>'+
'</li>' 

Answer 1

Renan, do it like this.

$("#selectAll").on('change', function () {

   var checked = this.checked;

   $(".checkReunioes").each(function(index, val) {

      $(this).prop("checked", checked);
   });
});

http://jsfiddle.net/msyjs7ch/

********EDITED

To change the text as per the action.

First to facilitate we will change the structure of the HTML adding a tag span.

   <label class="checkbox checkbox-dark"> 
      <span class="textoSelecionarTodos">Selecionar todos</span>
      <input type="checkbox" id="selectAll">
   </label>

And now our javascript looks like this

//isso é para otimizar e não fazer o jQuery buscar o mesmo elemento toda vez que o checkbox mudar
var $selectAllText = $('span.textoSelecionarTodos');

$("#selectAll").on('change', function () {

   var checked = this.checked;

   if(checked) {
       $selectAllText.text('Desmarcar todos');
   }
   else {
       $selectAllText.text('Selecionar todos');
   }

   $(".checkReunioes").each(function(index, val) {

      $(this).prop("checked", checked);
   });
});

Following example

http://jsfiddle.net/msyjs7ch/3/