简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Exemples pour expliquer l'implémentation par jQuery des fonctions de modification instantanée des cases à cocher et de suppression par lots

小云云
Libérer： 2017-12-22 10:28:35
original
1985 Les gens l'ont consulté

Cet article présente principalement l'implémentation jQuery de la modification instantanée des cases à cocher et de la suppression par lots et les pièges rencontrés dans le processus. Il est très bon et a une valeur de référence. J'espère qu'il pourra aider tout le monde à apprendre et à s'y référer. mieux maîtriser jQuery.

J'ai récemment utilisé jQuery pour implémenter une opération de suppression par lots, et l'effet est comme indiqué ci-dessous

La page finale page.html, cette page utilise bootstrap et jQuery, sinon Vous devez le télécharger 


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>视频管理</title>
  <link rel="stylesheet" type="text/css" href="css/init.css" rel="external nofollow" />
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" />
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style type="text/css">
   .head {
    background-color: #EFEFF4;
    font-size: 16px;
    color: black;
    padding: 20px;
    font-size: 20px;
    overflow: hidden;
    margin-bottom: 10px;
   }
   .table {
    margin-top: 30px;
    border: 1px solid #CCCCCC;
   }
   .name_info {
    color: red;
   }
   .message p {
    margin: 0px;
    padding: 0px;
   }
   .form_0 {
    background-color: #EEEEEE;
   }
  </style>
 </head>
 <body>
  <p class="container-fluid">
   <p id="row" class="head">
    <p class="col-sm-12 col-md-12 col-lg-12">
     <p>视频管理</p>
    </p>
   </p>
   <p id="row" class="col-sm-12 col-md-12">
    <p class="col-xs-1">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="batchDel" class="btn btn-danger btn">批量删除 <span class="badge" id="badge_0">0</span></a>
    </p>
    <p class="col-xs-1">
     <p class="text-danger">删除成功</p>
    </p>
    <p class="col-xs-1">
     <a href="speaker_add.html" rel="external nofollow" class="btn btn-primary btn">添加</a>
    </p>
    <p id="row" class="col-xs-6 col-md-offset-1">
     <form class="form-inline form_0" role="form">
      <p class="form-group col-xs-3 col-md-3">
       <input type="text" class="form-control" id="name" placeholder="课程名称">
      </p>
      <p class="form-group col-xs-2 col-md-2">
       <select class="form-control btn-primary">
        <option>请选择课程</option>
        <option>2</option>
       </select>
      </p>
      <p class="form-group col-xs-2 col-md-2">
       <select class="form-control btn-primary">
        <option>请选择老师</option>
        <option>2</option>
       </select>
      </p>
      <p class="form-group col-xs-2 col-md-2">
       <button type="submit" class="btn btn-primary">查询</button>
      </p>
     </form>
    </p>
   </p>
   <p class="row">
    <p class="col-md-10 col-lg-10">
     <table class="table table-striped">
      <thead>
       <tr>
        <th>选择</th>
        <th>序号</th>
        <th>名称</th>
        <th>介绍</th>
        <th>讲师</th>
        <th>时长</th>
        <th>播放次数</th>
        <th>编辑</th>
        <th>删除</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td>
         <input class="check_0" value="0" type="checkbox">
        </td>
        <td class="show_id">1</td>
        <td id="show_name">环境搭建</td>
        <td>这视频真tm牛逼</td>
        <td>老王</td>
        <td>666</td>
        <td>666</td>
        <td>
         <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </td>
        <td>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>删除</a>
        </td>
       </tr>
       <tr>
        <td>
         <input class="check_0" value="1" type="checkbox">
        </td>
        <td class="show_id">1</td>
        <td id="show_name">环境搭建</td>
        <td>这视频真tm牛逼</td>
        <td>老王</td>
        <td>666</td>
        <td>666</td>
        <td>
         <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </td>
        <td>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>删除</a>
        </td>
       </tr>
       <tr>
        <td>
         <input class="check_0" value="2" type="checkbox">
        </td>
        <td class="show_id">1</td>
        <td id="show_name">环境搭建</td>
        <td>这视频真tm牛逼</td>
        <td>老王</td>
        <td>666</td>
        <td>666</td>
        <td>
         <a href="video_update.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="edit_submit"><span class="glyphicon glyphicon-pencil"></span>编辑</a>
        </td>
        <td>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="delete" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-trash"></span>删除</a>
        </td>
       </tr>
      </tbody>
     </table>
    </p>
   </p>
   <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <p class="modal-dialog">
     <p class="modal-content">
      <p class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
      </p>
      <p id="info" class="modal-body">你确定要删除吗？</p>
      <p class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       <button type="button" id="delete_submit" class="btn btn-primary">确定</button>
      </p>
     </p>
     <!-- /.modal-content -->
    </p>
    <!-- /.modal -->
   </p>
  </p>
  <form id="form" method="post">
   <input type="hidden" name="_method" id="_method" value="DELETE" />
   <input type="hidden" name="id" id="id" />
  </form>
 </body>
 <script type="text/javascript">
  $(document).ready(function() {
   $("#delete").click(function() {
    var click_name = $(this).parent().siblings("#show_name").html();
    var click_id = $(this).parent().siblings("#show_id").html();
    $("#info").html("你确定要删除视频：<a class=&#39;name_info&#39;>" + click_name + "</a>吗？");
    $("#id").val(click_id);
   })
   $("#delete_submit").click(function() {
    $("#_method").val("DELETE");
    $("#form").submit();
   })
   $("#edit_submit").click(function() {
    var click_id = $(this).parent().siblings("#show_id").html();
    $("#id").val(click_id);
    $("#form").attr("method", "get");
    $("#_method").val("get");
    $("#form").submit();
   })
   //获取选中的个数
   $(".check_0").click(function() {
    $("#badge_0").html($("input[type=checkbox]:checked").length);
    //alert($("input[type = checkbox]: checked ").length); 
   })
   //批量删除
   $("#batchDel").click(function() {
     var params = "";
     $("input[type = checkbox]:checked").each(function(index,element){
      //第一个id不需要加前缀
      if(index == 0) {
       params += "id=" +
        $(this).val();
      } else {
       params += "&id=" +
        $(this).val();
      }
     });
     alert("生成的拼接参数：" + params);
   })
  })
 </script>
</html>
Copier après la connexion

L'opération dans l'image ci-dessus nécessite principalement deux opérations :

1. Effectuer lorsque la case à cocher est cliquée Sélectionner le nombre (avec fosse).

2. Lorsque vous cliquez sur la suppression par lots, l'ID de l'unité sélectionnée est épissé et passé en arrière-plan.

À première vue, il semble que celles-ci soient faciles à mettre en œuvre, et il existe de nombreuses façons de les mettre en œuvre. Je le pensais aussi au début, mais j'ai passé toute la matinée... Jetons ensuite un coup d'œil à certains des pièges de jQuery.

Mon idée initiale est d'effectuer un parcours each() sur toutes les cases à cocher à chaque fois que l'on clique sur la case à cocher, si elle est cochée, ajoutez Num++, et enfin attribuez la valeur de num aux petites balises numériques pour la suppression par lots. Au fait, les identifiants sont également épissés. 


$(".check_0").click(function(){
     var num=0;
    var del_str="";
    $(".check_0").each(function(){
     alert($(this).val()+":"+$(this).attr("checked"));
     if($(this).attr("checked")=="checked"){
      num++;
      del_str+=$(this).parent().siblings("show_id").html()+"/";
     }
     alert(this.checked);
    })
   })
Copier après la connexion

Lorsque ce code est déclenché, un phénomène étrange est découvert : ce code se déclenche avant que l'effet ne soit vérifié. Semblable à beforeClick(), donc lorsque le code est parcouru, l'état de vérification actuel ne peut pas être obtenu.

Concernant ce problème, j'ai longtemps cherché la réponse sur Internet, mais je ne sais tout simplement pas comment le résoudre, j'ai utilisé mouseup(), et cela a l'effet d'avantClick.

Finalement j'ai utilisé une autre façon d'écrire. 


//获取选中的个数
   $(".check_0").click(function() {
    $("#badge_0").html($("input[type=checkbox]:checked").length);
    //alert($("input[type = checkbox]: checked ").length); 
   })
   //批量删除
   $("#batchDel").click(function() {
     var params = "";
     $("input[type = checkbox]:checked").each(function(index,element){
      //第一个id不需要加前缀
      if(index == 0) {
       params += "id=" +
        $(this).val();
      } else {
       params += "&id=" +
        $(this).val();
      }
     });
     alert("生成的拼接参数：" + params);
   })
Copier après la connexion

Travail réussi !

Conclusion :

Lorsque vous utilisez le sélecteur input[type=[checkbox]:checked] dans click() pour obtenir l'élément coché, vous obtenez le résultat vérifié après clic().

Lorsque vous utilisez .each() pour parcourir, vous obtenez l'effet avant de cliquer.

Pourquoi peut-il y avoir deux effets, beforeclick et aferclick, dans une fonction clic ?

Recommandations associées :

jQuery implémente la fonction de recherche et affiche le contenu lié à la recherche

Explication détaillée de jQuery, cliquez n'importe où sauf celui spécifié zone pour masquer la fonction DIV

Exemple réelExplication détaillée du fonctionnement simple de jQuery pour implémenter la case à cocher

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!

Étiquettes associées：
jquery 讲解
source：php.cn
Article précédent：Exemple détaillé de JS réalisant l'effet de collision élastique de petites balles Article suivant：Introduction à la commande v for dans le composant vue et analyse des problèmes d'alarme lors de l'utilisation de v-for
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Conseils CSS : comment styliser les cases à cocher à l'aide de CSS J'essaie de styliser une case à cocher en utilisant : <inputtype="checkbox" s...
Depuis 2023-10-08 16:37:48
0
2
325
Comment modifier la valeur TXT : utilisez le bouton de commutation Je veux savoir comment modifier mon fichier database.txt en activant et désactivant le bou...
Depuis 2023-09-13 16:52:32
0
1
297
Réagir à la valeur booléenne d'entrée dans la valeur par défaut J'ai une entrée de case à cocher contrôlée et je suis censé définir la valeur par défaut s...
Depuis 2023-09-10 14:11:36
0
1
215
Préserver l'effet de bordure du bouton radio lorsqu'il est sélectionné J'ai deux options de type radio. Lorsque je sélectionne une option, une bordure bleue est ...
Depuis 2023-09-03 21:25:38
0
1
249
Désactiver l'effet de survol de la case à cocher v dans Vuetify 2 Lorsque vous survolez une case à cocher en v dans Vuetify2, un cercle grisé apparaît derri...
Depuis 2023-09-03 20:25:54
0
1
194
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！