web-dev-qa-db-fra.com

cocher/décocher les cases d'amorçage avec jQuery

J'ai fait un autre post hier et je n'ai pas réussi. Je vais essayer maintenant de réorganiser l'idée et de redemander car je ne trouve pas la solution (je suis novice et j'essaie vraiment fort).

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

extrait 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 de nombreuses recherches que j'ai trouvées lors de l'inspection, 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 division et une autre étendue sont ajoutées (je ne sais sérieusement pas pourquoi ni comment) alors je suppose maintenant que c'est un problème de DOM que je rencontre.

_ {Ceci est un extrait de mon fichier js:} _

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

Donc, cette fonction sélectionne TOUTES les cases à cocher que j'ai (même si celles que je ne veux pas parce qu'elles appartiennent à une autre catégorie).

Je veux savoir pourquoi les div et span sont ajoutés et comment ne sélectionner que les cases à cocher que je veux.

Pour ça, j'ai essayé un code comme ça 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é.

NOTE: Aucune erreur js n'est affichée lors de l'inspection

javascriptjqueryhtmltwitter-bootstrapcheckbox
8
Limon

Depuis que j'ai mentionné que cette fonction a coché toutes les cases que j'ai cochées (même si celles qui n'étaient pas censées être cochées), j'ai essayé de chercher la solution:

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

Mais ce n'est pas ce que je voulais. J'ai également mentionné avoir remarqué que le code était "différent" lors de son inspection (dans Chrome avec F12). Donc, comme @thecbuilder l'a dit, cela change afin d'ajouter du style.

Je me suis rendu compte que le code changeait ... je devais changer la classe (case à cocher) à partir de laquelle je commençais la recherche "balise span", alors je change la case de la classe en id id et voici le résultat:

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

Maintenant ça marche enfin.

6
Limon

En outre, il est important d'ajouter prop à true lors de la sélection des cases à cocher:

$("#checkAll").click(function(){
   var check = $(this).prop('checked');
   if(check == true) {
     $('.checker').find('span').addClass('checked');
     $('.checkbox').prop('checked', true);
   } else {
     $('.checker').find('span').removeClass('checked');
     $('.checkbox').prop('checked', false);
   }
});
9
Mufaddal Saifee

Je pense que vous cherchez un code comme:

$(document).ready(function()
{
    $("#allstates").on("change", function()
    {
        var checked = $(this).prop("checked");

        $(this).parents(".controls")
            .first()
            .find("input[type=checkbox]")
            .prop("checked", checked);
    });
});

Exemple JsFiddle

Lorsque l'état de la case à cocher portant l'id allstates change, obtenez la valeur de la case à cocher, recherchez le premier élément HTML parent avec une classe appelée controls, puis mettez à jour uniquement toutes les cases à cocher de cet élément avec la valeur de selected.

2
Erik Philips

Case à cocher simple bootstrap

<label><input type="checkbox" value="">Option 1</label>

Lors du débogage dans l'outil de développement Chrome, l'étiquette ressemble à https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

Pour activer l'état de la case à cocher Google, définissez simplement true|false sur lable.control.checked.

label.control.checked = false; //uncheck
label.control.checked = true; //check

Démo vidéo https://youtu.be/3qEMFd9bcd8

0
Anh Le Hoang