{"id":25235,"date":"2021-06-03T16:36:00","date_gmt":"2021-06-03T13:36:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25235"},"modified":"2021-10-18T02:34:41","modified_gmt":"2021-10-17T23:34:41","slug":"mehrere-kontrollkaestchen-auswaehlen-auswahl-mit-jquery-aufheben","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/mehrere-kontrollkaestchen-auswaehlen-auswahl-mit-jquery-aufheben\/","title":{"rendered":"Mehrere Kontrollk\u00e4stchen ausw\u00e4hlen Auswahl mit jQuery aufheben"},"content":{"rendered":"<p>Bei der Entwicklung von Webanwendungen m\u00fcssen wir normalerweise CRUD-Operationen ausf\u00fchren. F\u00fcr die Listenansicht hatten wir fr\u00fcher eine Tabelle mit mehreren Zeilen. In jeder Zeile behalten wir ein Kontrollk\u00e4stchen, um eine bestimmte Zeile zu aktivieren\/deaktivieren. Diese Kontrollk\u00e4stchen werden verwendet, wenn der Benutzer eine Zeile aus der Datenbank l\u00f6schen m\u00f6chte. Es kann auch eine Massenl\u00f6schfunktion haben, bei der das \u00fcbergeordnete Kontrollk\u00e4stchen zum Aktivieren\/Deaktivieren der untergeordneten Kontrollk\u00e4stchen verwendet wird.<\/p>\n<p>In diesem Artikel untersuchen wir, wie Sie mit jQuery mehrere Kontrollk\u00e4stchen aktivieren\/deaktivieren.<\/p>\n<p>Unsere endg\u00fcltige Ansicht ist wie im Screenshot unten gezeigt. Es zeigt das \u00fcbergeordnete Kontrollk\u00e4stchen in der \u00dcberschriftszeile und jede Zeile hat ein eigenes Kontrollk\u00e4stchen.<\/p>\n<\/p>\n<p>Wenn Sie das \u00fcbergeordnete Kontrollk\u00e4stchen aktivieren, werden alle untergeordneten Kontrollk\u00e4stchen aktiviert. Und wenn wir das \u00fcbergeordnete Kontrollk\u00e4stchen deaktivieren, sollten untergeordnete Kontrollk\u00e4stchen deaktiviert werden. Lassen Sie uns jedoch sehen, wie Sie mithilfe von jQuery mehrere Kontrollk\u00e4stchen aktivieren\/deaktivieren.<\/p>\n<h3>Beispieltabelle in Bootstrap erstellen<\/h3>\n<p>Um zu beginnen, ben\u00f6tigen wir eine Tabelle mit einigen Datens\u00e4tzen sowie Kontrollk\u00e4stchen. Im folgenden Code erstelle ich eine Dummy-Tabelle mit <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/content\/tables\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrap<\/a>. Ich habe auch Dummy-Eintr\u00e4ge in der Tabelle hinzugef\u00fcgt.<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" \/&gt;\n&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-xs-12 col-md-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;table class=\"table\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;thead&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;&lt;input type=\"checkbox\" id=\"selectall\"\/&gt;&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;First Name&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Last Name&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Username&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/thead&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tbody&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" class=\"singlechkbox\" name=\"username\" value=\"1\"\/&gt;&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Mark&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Otto&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;@mdo&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" class=\"singlechkbox\" name=\"username\" value=\"2\"\/&gt;&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Jacob&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Thornton&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;@fat&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" class=\"singlechkbox\" name=\"username\" value=\"3\"\/&gt;&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Larry&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;the Bird&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;@twitter&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tbody&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/table&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-xs-6 col-md-4\"&gt;&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Wenn Sie die obige HTML-Datei im Browser ausf\u00fchren, sehen Sie eine Tabelle mit 4 Zeilen. Die erste Zeile ist f\u00fcr \u00dcberschriftenzwecke und die erste Spalte f\u00fcr die Kontrollk\u00e4stchen. Jetzt werden wir jQuery-Code schreiben, der Kontrollk\u00e4stchen tats\u00e4chlich zaubert.<\/p>\n<h3>jQuery-Code, der mehrere Kontrollk\u00e4stchen aktiviert\/deaktiviert<\/h3>\n<p>jQuery stellt Methoden und Events bereit, mit denen wir unser Ziel erreichen k\u00f6nnen. Hier werde ich <code>click<\/code>Ereignis und <code>prop<\/code>Methode verwenden, um unsere Aufgabe zu erf\u00fcllen.<\/p>\n<pre><code>&lt;script type=\"text\/javascript\"&gt;\njQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '#selectall', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.singlechkbox').prop('checked', this.checked);\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.singlechkbox', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($('.singlechkbox').length == $('.singlechkbox:checked').length) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#selectall').prop('checked', true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#selectall\").prop('checked', false);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0});\n});\n&lt;\/script&gt;<\/code><\/pre>\n<p>Der obige Code pr\u00fcft, ob das \u00fcbergeordnete Kontrollk\u00e4stchen aktiviert ist. Wenn dies der Fall ist, werden alle Kontrollk\u00e4stchen aktiviert. Wenn Sie das \u00fcbergeordnete Kontrollk\u00e4stchen deaktivieren, werden auch alle untergeordneten Kontrollk\u00e4stchen deaktiviert.<\/p>\n<p>Ich hoffe, Sie verstehen, wie Sie Kontrollk\u00e4stchen mit jQuery aktivieren\/deaktivieren. Ich w\u00fcrde gerne Ihre Meinung im Kommentarbereich unten h\u00f6ren.<\/p>\n<h4>Zum Thema passende Artikel<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/wie-man-ein-bild-mit-jquery-und-php-hochlaedt-zuschneidet-und-seine-groesse-aendert\/\" title=\"Bilder mit jQuery und PHP hochladen, zuschneiden und in der Gr\u00f6\u00dfe \u00e4ndern\">Bilder mit jQuery und PHP hochladen, zuschneiden und in der Gr\u00f6\u00dfe \u00e4ndern<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-fuegen-sie-ihren-website-bildern-einen-zoom-effekt-hinzu\/\" title=\"F\u00fcgen Sie den Zoom-Effekt zu Ihren Website-Bildern hinzu\">F\u00fcgen Sie den Zoom-Effekt zu Ihren Website-Bildern hinzu<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/de\/so-implementieren-sie-jquery-datepicker-mit-timepicker\/\" title=\"So implementieren Sie jQuery Datepicker mit Timepicker\">So implementieren Sie jQuery Datepicker mit Timepicker<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Tutorial schreibe ich einen Code f\u00fcr mehrere Kontrollk\u00e4stchen, um die Auswahl mit jQuery aufzuheben. Es ist erforderlich, wenn CRUD-Operationen mit dem<\/p>\n","protected":false},"author":1,"featured_media":21662,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[254],"tags":[845],"class_list":["post-25235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-3","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=25235"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/25235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/21662"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=25235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=25235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=25235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}