Maison >interface Web >js tutoriel >Solution Jquery pour tout sélectionner et inverser les sélections et l'exécuter une fois en un seul clic_jquery

Solution Jquery pour tout sélectionner et inverser les sélections et l'exécuter une fois en un seul clic_jquery

WBOYoriginal: 2016-05-16 15:45:011173parcourir

Exigences du code : l'utilisation de attr ne peut être exécutée qu'une seule fois, l'utilisation de prop peut parfaitement réaliser toutes les sélections et sélections inverses, obtenir tous les éléments sélectionnés et former le texte de l'élément sélectionné en une chaîne.

Solution 1 :

Le code est le suivant :

<html>
<head>
　　<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
　　<input type="checkbox" name="chk_list[]" value="1" />1
　　<input type="checkbox" name="chk_list[]" value="2" />2
　　<input type="checkbox" name="chk_list[]" value="3" />3
　　<input type="checkbox" name="chk_list[]" value="4" />4
　　<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
　　$("#chk_all").click(function(){
 　　// 使用attr只能执行一次
 　　$("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); 
 　　// 使用prop则完美实现全选和反选
 　　$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));
　　　　// 获取所有选中的项并把选中项的文本组成一个字符串
 　　var str = '';
 　　$($("input[name='chk_list[]']:checked")).each(function(){
 　　str += $(this).next().text() + ',';
 　　});
 　　alert(str);
　　});
</script>
</body>
</html>

Résumé :

Pour les attributs inhérents à l'élément HTML lui-même, utilisez la méthode prop lors du traitement.

Pour nos propres attributs DOM personnalisés des éléments HTML, utilisez la méthode attr lors de leur traitement.

Référence http://www.jb51.net/article/62308.htm

Solution 2 :

Description du problème :

$(".chooseall").click(function(){
 if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
 console.log(1);
 }else{
 $("input[name='checkbox1']").attr("checked","checked");
 console.log(2);
 }
});

Les premier et deuxième clics du code ci-dessus peuvent réaliser les fonctions de sélection et de sélection inverse, mais cela ne fonctionne plus au bout d'un moment

À l'exception de la première case à cocher, les autres sont générées dynamiquement par ajax. Cela a-t-il quelque chose à voir avec cela ? Console.log peut alternativement afficher 1 et 2 à chaque fois que vous cliquez dessus, mais le code au milieu ne peut pas être exécuté.

Solution :

Un seul paramètre RemoveAttr est requis, RemoveAttr("checked")
Il est cependant recommandé de le remplacer par

$(".chooseall").click(function(){
 if($(".chooseall").prop("checked") == true){
 $("input[name='checkbox1']").prop("checked", false);
 console.log(1);
 }else{
 $("input[name='checkbox1']").prop("checked", false);
 console.log(2);
 }
});

Ou de manière plus concise,

$(".chooseall").click(function(){
 var isChecked = $(this).prop("checked");
 $("input[name='checkbox1']").prop("checked", isChecked);
});

Ce qui précède est la solution Jquery pour tout sélectionner et inverser la sélection en un seul clic. J'espère que cela sera utile à tout le monde.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Guide d'apprentissage des bases de jQuery_jqueryArticle suivant：Guide d'apprentissage des bases de jQuery_jquery

Articles Liés

Voir plus