{"id":25252,"date":"2021-06-03T16:18:00","date_gmt":"2021-06-03T13:18:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25252"},"modified":"2021-10-17T20:28:33","modified_gmt":"2021-10-17T17:28:33","slug":"useita-valintaruutuja-valitse-poista-valinta-kayttamalla-jquerya","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/useita-valintaruutuja-valitse-poista-valinta-kayttamalla-jquerya\/","title":{"rendered":"Useita valintaruutuja Valitse Poista valinta k\u00e4ytt\u00e4m\u00e4ll\u00e4 jQuery\u00e4"},"content":{"rendered":"<p>Verkkosovelluksia kehitett\u00e4ess\u00e4 meid\u00e4n on yleens\u00e4 suoritettava CRUD-operaatiot. Luettelon\u00e4kym\u00e4ss\u00e4 meill\u00e4 oli aiemmin taulukko, jossa oli useita rivej\u00e4. Pid\u00e4mme jokaisella rivill\u00e4 valintaruudun tietyn rivin valitsemiseksi \/ poistamiseksi. N\u00e4m\u00e4 valintaruudut ovat k\u00e4yt\u00f6ss\u00e4, kun k\u00e4ytt\u00e4j\u00e4 haluaa poistaa rivin tietokannasta. Sill\u00e4 voi olla my\u00f6s joukkopoistotoiminto, jossa vanhemman valintaruutu k\u00e4ytti lapsen valintaruutujen valitsemista \/ poistamista.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa tutkitaan, kuinka voidaan valita \/ poistaa useita valintaruutuja jQuery\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4.<\/p>\n<p>Viimeinen n\u00e4kym\u00e4mme on kuten alla olevassa kuvakaappauksessa. Se n\u00e4ytt\u00e4\u00e4 yl\u00e4tason valintaruudun otsikkorivill\u00e4 ja jokaisella rivill\u00e4 on oma valintaruutunsa.<\/p>\n<\/p>\n<p>Vanhemman valintaruudun valitseminen tarkistaa kaikki lapsen valintaruudut. Ja kun poistat vanhemman valintaruudun valinnan, lapsen valintaruudut on poistettava. Sanotaan, ett\u00e4 katsotaanpa, kuinka k\u00e4ytet\u00e4\u00e4n useita valintaruutuja, valitse \/ poista valinta jQueryn avulla.<\/p>\n<h3>Luo mallitaulukko Bootstrapiin<\/h3>\n<p>Aloittamiseen tarvitaan taulukko, jossa on joitain tietueita sek\u00e4 valintaruudut. Seuraavassa koodissa <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/content\/tables\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">luon<\/a> nuken taulukon <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/content\/tables\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrapilla<\/a>. Olen my\u00f6s lis\u00e4nnyt taulukkomerkint\u00f6j\u00e4 taulukkoon.<\/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>Jos suoritat yll\u00e4 olevan HTML-tiedoston selaimessa, n\u00e4et taulukon, joka sis\u00e4lt\u00e4\u00e4 4 rivi\u00e4. Ensimm\u00e4inen rivi on tarkoitettu otsikkotarkoituksiin ja ensimm\u00e4inen sarake on valintaruutuja varten. Nyt aiomme kirjoittaa jQuery-koodin, joka tekee todellista taikuutta valintaruutuihin.<\/p>\n<h3>jQuery-koodi, joka valitsee \/ poistaa useita valintaruutuja<\/h3>\n<p>jQuery tarjoaa menetelmi\u00e4 ja tapahtumia, joiden avulla voimme saavuttaa tavoitteemme. T\u00e4\u00e4ll\u00e4 k\u00e4yt\u00e4n <code>click<\/code>tapahtumaa ja <code>prop<\/code>menetelm\u00e4\u00e4 teht\u00e4v\u00e4mme suorittamiseen.<\/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>Yll\u00e4 oleva koodi tarkistaa, onko yl\u00e4tason valintaruutu valittuna. Jos on, se tarkistaa kaikki valintaruudut. Kun poistat vanhemman valintaruudun valinnan, se poistaa kaikki lapsen valintaruudut.<\/p>\n<p>Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka tehd\u00e4 valintaruudut \/ poistaa niiden valinta jQuery\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-rajata-ja-muuttaa-kuvan-kokoa-jqueryn-ja-php-n-avulla\/\" title=\"Lataa, rajaa ja muuta kuvan kokoa jQueryn ja PHP: n avulla\">Lataa, rajaa ja muuta kuvan kokoa jQueryn ja PHP: n avulla<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-zoomauskuvaefekti-verkkosivustosi-kuviin\/\" title=\"Lis\u00e4\u00e4 Zoom Image Effect verkkosivustosi kuviin\">Lis\u00e4\u00e4 Zoom Image Effect verkkosivustosi kuviin<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-toteuttaa-jquery-datepicker-timepickerilla\/\" title=\"Kuinka toteuttaa jQuery Datepicker Timepickerill\u00e4\">Kuinka toteuttaa jQuery Datepicker Timepickerill\u00e4<\/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>T\u00e4ss\u00e4 opetusohjelmassa kirjoitan koodin mutiple-valintaruudulle, jonka valinta poistetaan valinnasta jQueryn avulla. Se vaaditaan CRUD-operaatioita suoritettaessa<\/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":[257],"tags":[843],"class_list":["post-25252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=25252"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/25252\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21662"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=25252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=25252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=25252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}