jQuery Girl
  1. jQuery Girl
  3. Cocher et décocher la case à cocher dynamicment avec jQuery: bug?
Intereting Posts
Lien vers l’onglet JQuery depuis le contenu de la page Guidon si la condition ne fonctionne pas Comment vider le message dans une zone de texte avec jQuery? jQuery Ajax attend que toutes les images soient chargées Comment appliquer des styles CSS aux objects Raphael.js à l’aide de jQuery? Mise en évidence de la validation ASP.net MVC et icône sur les champs incorrects remote: true pour form_for pour une nouvelle action, mais pas pour créer une action Trouvez des marqueurs spéciaux en séquence et faites quelque chose avec le texte entre les deux Détection d’événement de case à cocher dans la cellule jqGrid Comment puis-je obtenir le nom de la clé et sa valeur à partir d’un tableau dans un object JSON jQuery Chained: Comment déchaîner un menu déroulant? Prévisualiser les images avant de les télécharger pour plusieurs images Flot Data Labels sur le graphique à barres horizontales Comment faire pour Jqgrid la colonne gelée word-wrap comment recharger un bloc de code javascript

Cocher et décocher la case à cocher dynamicment avec jQuery: bug?

J’ai créé un script afin de contrôler les cases à cocher maître et esclave (vérification et désélection automatique).

Voici mon JS: 

$(document).ready(function() { $('#myCheck').click(function() { $('.myCheck').attr('checked', false); }); $('.myCheck').click(function() { if ($('.myCheck').is(':checked')) { $('#myCheck').attr('checked', false); } else { $('#myCheck').attr('checked', true); // IT DOESN'T WORK, WHY ? alert("Checkbox Master must be checked, but it's not!"); } }); });

Et voici mon HTML: 

   Checkbox Master
   Checkbox Slave 1
   Checkbox Slave 2

Regardez mon simple JsFiddle pour comprendre le problème.

EDIT 1: Comme Inser l’a dit, le problème se pose avec jQuery 1.9.2 et plus. Plus de problème avec jQuery 1.8.3. Étrange…

EDIT 2: Inser a trouvé la solution, utilisez .prop (‘vérifié’, true) à la place .attr (‘vérifié’, true) . Regardez les commentaires ci-dessous …

Utilisez la méthode prop pour les nouvelles versions de jQuery: 

 $('#myCheck').prop('checked', true); $('#myCheck').prop('checked', false);

http://jsfiddle.net/uQfMs/37/

Vous pouvez essayer ceci. 

 $('#myCheck').click(function() { var checkBoxes = $(this).siblings('input[type=checkbox]'); checkBoxes.prop('checked', $(this).is(':checked') ? true : false); });

Vous voulez peut-être simplement cocher la case à cocher principale: 

 $('#myCheck').click(function() { $('.myCheck').attr('checked', false); $(this).attr('checked', true); });

voir ce violon .

J’ai fait quelques expériences, en fait $(':checkbox').attr('checked',false); Bien que cela puisse définir l’atsortingbut “vérifié”, il n’apparaîtra pas dans le visuel. et $(':checkbox').prop('checked', true); celui-ci fonctionne parfaitement! espérons que cela pourrait aider.

Je vous ai écrit un plugin pour cela: 

 $.fn.dependantCheckbox = function() { var $targ = $(this); function syncSelection(group, action) { $targ.each(function() { if ($(this).data('checkbox-group') === group) { $(this).prop('checked', action); } }); }; $('input[type="checkbox"][data-checkbox-group]').on('change', function() { var groupSelection = $(this).data('checkbox-group'); var isChecked = $(this).prop('checked'); syncSelection(groupSelection, isChecked); }); } $('input[type="checkbox"][data-checkbox-group]').dependantCheckbox();

http://codepen.io/nicholasabrams/pen/mJqyqG