{"id":25736,"date":"2021-06-03T16:12:00","date_gmt":"2021-06-03T13:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25736"},"modified":"2021-10-17T18:30:17","modified_gmt":"2021-10-17T15:30:17","slug":"mitu-markeruutu-valige-tuhista-valimine-jquery-abil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/mitu-markeruutu-valige-tuhista-valimine-jquery-abil\/","title":{"rendered":"Mitu m\u00e4rkeruutu Valige T\u00fchista valimine jQuery abil"},"content":{"rendered":"<p>Veebirakenduste v\u00e4ljat\u00f6\u00f6tamise ajal peame tavaliselt tegema CRUD-toiminguid. Loendivaate jaoks oli meil varem mitme reaga tabel. Igas reas hoiame m\u00e4rkeruutu konkreetse rea m\u00e4rkimiseks \/ t\u00fchjendamiseks. Neid m\u00e4rkeruute kasutatakse siis, kui kasutaja soovib andmebaasist rida kustutada. Sellel v\u00f5ib olla ka hulgi kustutamise funktsioon, kus vanem m\u00e4rkeruut kasutas lapse m\u00e4rkeruutude valimist \/ t\u00fchistamist.<\/p>\n<p>Selles artiklis uurime, kuidas teha jQuery abil mitu m\u00e4rkeruutu \/ t\u00fchistada nende m\u00e4rkimine.<\/p>\n<p>Meie viimane vaade on selline, nagu on n\u00e4idatud alloleval ekraanipildil. See n\u00e4itab pealkirja real vanema m\u00e4rkeruutu ja igal real on oma m\u00e4rkeruut.<\/p>\n<\/p>\n<p>Vanemate m\u00e4rkeruudu m\u00e4rkimisel m\u00e4rgitakse k\u00f5ik lapse m\u00e4rkeruudud. Ja kui t\u00fchistame vanema m\u00e4rkeruudu, peaksid lapse m\u00e4rkeruudud olema m\u00e4rkimata. Olgu \u00f6eldud, et vaatame, kuidas rakendada jQuery abil mitu m\u00e4rkeruutu.<\/p>\n<h3>Looge Bootstrapis n\u00e4idistabel<\/h3>\n<p>Alustamiseks vajame tabelit, kus on m\u00f5ned kirjed koos m\u00e4rkeruutudega. Allpool olevas koodis loo <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/content\/tables\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrapi<\/a> abil n\u00e4iv tabel. Olen tabelisse lisanud ka n\u00e4ivkirjed.<\/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>Kui k\u00e4ivitate \u00fclaltoodud HTML-faili brauseris, n\u00e4ete tabelit, mis sisaldab 4 rida. Esimene rida on m\u00f5eldud pealkirjade jaoks ja esimene veerg m\u00e4rkeruutude jaoks. N\u00fc\u00fcd kirjutame jQuery koodi, mis teeb m\u00e4rkeruutudesse tegelikku v\u00f5luv\u00e4ge.<\/p>\n<h3>jQuery kood, mis valib mitu m\u00e4rkeruutu \/ t\u00fchistab nende valimise<\/h3>\n<p>jQuery pakub meetodeid ja s\u00fcndmusi, mille abil saame oma eesm\u00e4rgi saavutada. Siin kasutan meie \u00fclesande t\u00e4itmiseks <code>click<\/code>s\u00fcndmust ja <code>prop<\/code>meetodit.<\/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>\u00dclaltoodud kood kontrollib, kas vanema m\u00e4rkeruut on m\u00e4rgitud. Kui see on nii, siis kontrollib see k\u00f5iki m\u00e4rkeruute. Kui t\u00fchjendate vanema m\u00e4rkeruudu, t\u00fchistab see ka k\u00f5igi laste m\u00e4rkeruudud.<\/p>\n<p>Loodan, et saate aru, kuidas jQuery abil m\u00e4rkeruudud valida \/ t\u00fchistada. Tahaksin kuulda teie m\u00f5tteid allpool olevast kommentaaride jaotisest.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/pildi-uleslaadimine-karpimine-ja-suuruse-muutmine-jquery-ja-php-abil\/\" title=\"Pildi \u00fcleslaadimine, k\u00e4rpimine ja suuruse muutmine jQuery ja PHP abil\">Pildi \u00fcleslaadimine, k\u00e4rpimine ja suuruse muutmine jQuery ja PHP abil<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-lisada-oma-veebisaidi-piltidele-suumi-pildiefekti\/\" title=\"Lisage oma veebisaidi piltidele suumi pildiefekt\">Lisage oma veebisaidi piltidele suumi pildiefekt<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/jquery-datepickeri-rakendamine-timepickeriga\/\" title=\"JQuery Datepickeri rakendamine Timepickeriga\">JQuery Datepickeri rakendamine Timepickeriga<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selles \u00f5petuses kirjutan koodi mutiple m\u00e4rkeruudu valimiseks t\u00fchista valimine, kasutades jQuery. See on vajalik CRUD-toimingute tegemisel<\/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":[256],"tags":[842],"class_list":["post-25736","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/25736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=25736"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/25736\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/21662"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=25736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=25736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=25736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}