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
<!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='name_info'>" + 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!
