Beispiele zur Erläuterung der jQuery-Implementierung der Funktionen zur sofortigen Änderung von Kontrollkästchen und zum Löschen von Stapeln-js-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich die jQuery-Implementierung der sofortigen Änderung von Kontrollkästchen und die dabei auftretenden Fallstricke vor. Er ist sehr gut und hat einen Referenzwert. Ich hoffe, er kann jedem beim Lernen helfen jQuery besser beherrschen.

Ich habe kürzlich jQuery verwendet, um einen Stapellöschvorgang zu implementieren, und der Effekt ist wie unten gezeigt

Die letzte Seite page.html, diese Seite verwendet Bootstrap und jQuery, wenn nicht, müssen Sie es herunterladen

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

<!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>

Nach dem Login kopieren

Der Vorgang im obigen Bild erfordert hauptsächlich zwei Vorgänge:

1. Ausführen, wenn das Kontrollkästchen angeklickt wird. Wählen Sie die Anzahl aus (mit Grube).

2. Wenn auf „Batch-Löschen“ geklickt wird, wird die ID der ausgewählten Einheit gespleißt und an den Hintergrund übergeben.

Auf den ersten Blick scheinen diese einfach umzusetzen zu sein, und es gibt viele Möglichkeiten, sie umzusetzen. Das dachte ich zuerst auch, aber ich habe den ganzen Vormittag damit verbracht ... Als Nächstes werfen wir einen Blick auf einige der Fallstricke von jQuery.

Meine ursprüngliche Idee ist, jedes Mal, wenn die CheckBox angeklickt wird, einen Each()-Durchlauf für alle CheckBoxen durchzuführen, Num++ hinzuzufügen und schließlich den Wert von Num den kleinen digitalen Tags für die Stapellöschung zuzuweisen. Übrigens sind auch die IDs gespleißt.

$(".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);
    })
   })

Nach dem Login kopieren

Wenn dieser Code ausgelöst wird, wird ein seltsames Phänomen entdeckt: Dieser Code wird ausgelöst, bevor die Wirkung überprüft wird. Ähnlich wie beforeClick (), sodass beim Durchlaufen des Codes der aktuelle Prüfstatus nicht abgerufen werden kann.

Zu diesem Problem habe ich lange im Internet nach der Antwort gesucht, aber ich weiß einfach nicht, wie ich es lösen soll, und es hat den Effekt von beforeClick.

Endlich habe ich eine andere Schreibweise verwendet.

//获取选中的个数
   $(".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);
   })

Nach dem Login kopieren

Erfolgreich gearbeitet!

Schlussfolgerung:

Wenn Sie den Selektor input[type=[checkbox]:checked] in click() verwenden, um das überprüfte Element abzurufen, erhalten Sie das überprüfte Ergebnis nach click().

Wenn Sie .each() zum Durchlaufen verwenden, erhalten Sie den Effekt, bevor Sie klicken.

Warum kann es in einer Klickfunktion zwei Effekte geben, vor dem Klicken und nach dem Klicken?

Verwandte Empfehlungen:

jQuery implementiert die Suchfunktion und zeigt suchbezogene Inhalte an

Detaillierte Erklärung von jQuery, klicken Sie auf eine beliebige Stelle außer der angegebenen Bereich zum Ausblenden der DIV-Funktion

Echtes BeispielDetaillierte Erklärung der einfachen Operation von jQuery zum Implementieren des Kontrollkästchens

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der jQuery-Implementierung der Funktionen zur sofortigen Änderung von Kontrollkästchen und zum Löschen von Stapeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!