Maison >interface Web >js tutoriel >Opération de jQuery consistant à tout sélectionner et à décocher toutes les cases

Opération de jQuery consistant à tout sélectionner et à décocher toutes les cases

高洛峰original: 2017-02-06 13:09:051025parcourir

Je vais d'abord vous montrer les rendus. Si vous vous sentez bien, veuillez continuer à vous référer au code d'implémentation.

jQuery对checkbox 复选框的全选全不选反选的操作

Code HTML :

<body>
<ul id="list">
<li><label><input type="checkbox" name="items" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" name="items" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" name="items" value="3"> 3.真的爱你</label></li>
<li><label><input type="checkbox" name="items" value="4"> 4.不再犹豫</label></li>
<li><label><input type="checkbox" name="items" value="5"> 5.光辉岁月</label></li>
<li><label><input type="checkbox" name="items" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all"> 全选/全不选</br>
<input type="button" value="全选" class="btn" id="selectAll">
<input type="button" value="全不选" class="btn" id="unSelect">
<input type="button" value="反选" class="btn" id="reverse">
<input type="button" value="获得选中的所有值" id="btn" id="getValue">
</body>

Code jquery :

<script type="text/javascript">
$(function(){
//全选/全不选
$("#all").click(function(){
$("[name=items]:checkbox").attr("checked",this.checked);
});
$("[name=items]:checkbox").click(function(){
var flag=true;
$("[name=items]:checkbox").each(function(){
if(!this.checked){
flag=false;
}
});
$("#all").attr("checked",flag);
})
//全选
$("#selectAll").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",true);
});
});
//全不选
$("#unSelect").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked",false);
});
});
//反选
$("#reverse").click(function(){
$("[name=items]:checkbox").each(function(){ //遍历每一个复选框
//$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$("#btn").click(function(){
var str="你选中的是：\r\n";
$("[name=items]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
})
</script>

Remarque : en raison du changement de version de jquery, la nouvelle version ne peut être cliquée qu'une seule fois. L'ancienne version est OK, mais la nouvelle version ne peut pas utiliser attr pour définir l'état sélectionné. . La première solution consiste à utiliser la méthode native js this.checked=true/false;

La deuxième solution consiste à remplacer attr par prop.

Ce qui précède est l'opération jQuery que l'éditeur vous présente pour tout sélectionner, désélectionner et inverser la case à cocher. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi le faire. sachez. Laissez un message et l’éditeur vous répondra à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles liés à jQuery sur l'opération de sélection de tout, de désélection et d'inversion de la case, veuillez faire attention au site Web PHP chinois !

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：js html css implémente la sélection complète et la sélection inverse des cases à cocherArticle suivant：js html css implémente la sélection complète et la sélection inverse des cases à cocher

Articles Liés

Voir plus