cochez/décochez l'option "bootstrap" cases à cocher avec jQuery

J'ai fait un autre post hier et n'avait pas de succès avec elle. Je vais essayer maintenant de les réorganiser de l'idée et de demander à nouveau car je ne peux pas trouver la solution pour cela (je suis un débutant et j'essaye vraiment dur).

Le truc c'est que je travaille avec ce modèle basé sur Bootstrap, et c'est le code que je peux voir directement à partir de l'un des fichiers et que j'utilise sur mon projet:

extrait de code html:

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" value="all" id="allstates" name="all"/>Todas
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>

        <label class="checkbox span4">
          <input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
      </div>
    </div>
  </div>

Après beaucoup de recherche, j'ai fondé lors de l'inspection que mon code ressemble à ceci (extrait):

<div class="controls">
  <label class="checkbox span4">
    <div class="checker" id="uniform-allstates">
      <span>
        <input type="checkbox" value="all" id="allstates" name="all">
      </span>
    </div>Todas
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Caba" id="" name="st[]">                          
       </span>
    </div> Ciudad Autónoma de Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">                           
      </span>
    </div> Buenos Aires
  </label>

  <label class="checkbox span4">
    <div class="checker">
      <span>
        <input class="states" type="checkbox" value="Catamarca" id="" name="st[]">                             
      </span>
    </div> Catamarca
  </label>
</div>        

Comme vous pouvez le voir, une autre div et une autre plage (sérieusement ne sais pas pourquoi ni comment) donc je suppose que maintenant il est certains DOM problème que celui que je vais avoir.

C'est extrait de mon fichier js:

$('#allstates').click(function() {
  $('.checkbox').find('span').addClass('checked');
});

Donc cette fonction permet de sélectionner TOUTES les cases à cocher que j'ai (même si ceux que je ne veux pas parce qu'ils appartiennent à une autre catégorie).

Je veux savoir pourquoi la div et span sont ajoutés et la façon de sélectionner uniquement les cases à cocher que je veux.

Pour que j'ai essayé ce code mais sans succès:

test 1

$('#allstates').click(function() {
  if ($(this).is(':checked')) {
    $('span input').attr('checked', true);
  } else {
    $('span input').attr('checked', false);
  }
});

test2

$('#allstates').click(function() {
  $(".states").prop("checked",$("#allstates").prop("checked"))
});

et tellement d'autres que j'ai effacé.

REMARQUE: Pas de js erreurs sont affichées lors de l'inspection

OriginalL'auteur Limon | 2014-08-05