Maison  >  Article  >  interface Web  >  Comment utiliser jquery pour tout sélectionner et supprimer

Comment utiliser jquery pour tout sélectionner et supprimer

藏色散人
藏色散人original
2020-12-15 13:59:301923parcourir

Comment utiliser jquery pour tout sélectionner et supprimer : créez d'abord un exemple de fichier de code html ; puis modifiez le code jquery ; enfin passez "$(".seleAll").on("click", function() {. ..}" méthode pour réaliser la fonction de suppression de tout sélectionner.

Comment utiliser jquery pour tout sélectionner et supprimer

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.0. , ordinateur Dell G3.

Recommandé : "Tutoriel vidéo jquery"

Utilisez jquery pour implémenter la fonction de suppression de tout sélectionner

code html

<div class="box">
<ul>
<li><input type="checkbox" /> 少小离家胖了回</li>
<li><input type="checkbox" /> 乡音无改肉成堆</li>
<li><input type="checkbox" /> 儿童相见不相识</li>
<li><input type="checkbox" /> 笑问胖子你是谁</li>
</ul>
<div>
<input type="button" class="seleAll" value="全选" />
<input type="button" class="reverse" value="反选" />
<input type="button" class="op" value="全不选" />
<input type="button" class="del" value="删除" />
</div>
</div>

code jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//全选
$(".seleAll").on("click", function() {
var oin = $("input[type=&#39;checkbox&#39;]")
oin.each(function() {
$(this).prop("checked", true)
})
})
//全不选
$(".op").on("click", function() {
var oin = $("input[type=&#39;checkbox&#39;]")
oin.each(function() {
$(this).prop("checked", false)
})
})
// 反选 
$(".reverse").on("click", function() {
// 获取节点 
var oin = $("input[type=&#39;checkbox&#39;]")
oin.each(function() {
this.checked = !this.checked
})
})
// 批量删除 
$(".del").on("click", function() {
var sele = $(":checkbox:checked")
if(sele.length > 0) {
sele.each(function() {
$(this).parent().remove()
})
} else {
alert("至少选一个数据")
}
})
</script>

Effet d'exécution :

Comment utiliser jquery pour tout sélectionner et supprimer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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