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

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

WBOY

Libérer： 2016-05-16 15:45:01

original

1134 Les gens l'ont consulté

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>

Copier après la connexion

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);
 }
});

Copier après la connexion

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);
 }
});

Copier après la connexion

Ou de manière plus concise,

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

Copier après la connexion

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.