Maison > Article > interface Web > Comment obtenir un effet de sélection complète avec jquery
Comment obtenir un effet de sélection complète avec jquery
- 藏色散人original
- 2021-11-12 10:26:275109parcourir
Comment obtenir l'effet tout sélectionner avec jquery : 1. Créez un exemple de fichier HTML ; 2. Utilisez la méthode "$('input').click(function(){...}" pour déterminer si le fichier actuel La case de sélection de tout est sélectionnée
L'environnement d'exploitation de cet article : système Windows7, jquery version 3.2.1, ordinateur DELL G3
Comment obtenir l'effet de sélection totale avec jquery ? jQuery pour obtenir l'effet de sélection totale
Il s'agit d'une section utilisant jquery. L'idée principale du code pour tout sélectionner est la suivante :
1. Toutes les cases à cocher ont des événements de clic et tous les effets sont implémentés sous. l'événement de clic 2. Les fonctions implémentées en sélectionnant toutes les cases à cocher sont différentes des autres. Les fonctions implémentées par les options de vérification sont différentes. Un jugement est effectué au sein de l'événement de clic pour déterminer s'il s'agit d'un événement de clic pour tous les éléments sélectionnés. 3. Si c'est le cas, effectuez un jugement pour déterminer si la case à cocher Tous sélectionnés est sélectionnée. Si l'état actuel est sélectionné, cliquez pour décocher et décocher toutes les options en même temps. cliquez pour vérifier et cocher tout 4. Si ce n'est pas le cas, cela signifie que l'objet cliqué est en dehors des autres options Sélectionner tout, alors il est nécessaire de déterminer si le nombre d'options actuellement cochées est égal au nombre de toutes les options sauf. la case à cocher tout sélectionner. S'ils sont égaux, cela signifie que toutes les options sont cochées, et la case à cocher tout sélectionner est également Cochez-la, sinon ne la cochez pas Ce qui suit est mon code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').click(function(){
if($(this).index() == 0){
//判断当前全选框是否选中，如果选中则全选，否则全不选
if($('input').eq(0).prop('checked')){
$(this).nextAll().prop('checked',true);
}else{
$(this).nextAll().prop('checked',false);
}
}else{
//判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
if($('input:gt(0):checked').length == $('input').length-1){
$('input').eq(0).prop('checked',true)
}else{
$('input').eq(0).prop('checked',false)
}
}
})
})
</script>
</head>
<body>
<input type="checkbox" />全选
<input type="checkbox" />语文
<input type="checkbox" />数学
<input type="checkbox" />英语
</body>
</html>. Il existe de nombreuses idées pour obtenir l'effet de sélection totale. Cette idée est légèrement plus difficile que l'idée de séparer deux événements de clic, mais le code pour obtenir l'effet est en fait le même. Apprentissage recommandé : "Tutoriel vidéo jquery
"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!