{"id":25287,"date":"2021-06-03T16:33:00","date_gmt":"2021-06-03T13:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25287"},"modified":"2021-10-18T02:09:24","modified_gmt":"2021-10-17T23:09:24","slug":"case-a-cocher-multiple-selectionnez-deselectionnez-a-l-aide-de-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/case-a-cocher-multiple-selectionnez-deselectionnez-a-l-aide-de-jquery\/","title":{"rendered":"Case \u00e0 cocher multiple S\u00e9lectionnez D\u00e9s\u00e9lectionnez \u00e0 l&rsquo;aide de jQuery"},"content":{"rendered":"<p>Lors du d\u00e9veloppement d&rsquo;applications Web, nous devons g\u00e9n\u00e9ralement effectuer des op\u00e9rations CRUD. Pour la vue en liste, nous avions l&rsquo;habitude d&rsquo;avoir une table avec plusieurs lignes. Dans chaque ligne, nous gardons une case \u00e0 cocher pour cocher\/d\u00e9cocher une ligne sp\u00e9cifique. Ces cases \u00e0 cocher sont utilis\u00e9es lorsque l&rsquo;utilisateur souhaite supprimer une ligne de la base de donn\u00e9es. Il peut \u00e9galement avoir une fonctionnalit\u00e9 de suppression en bloc o\u00f9 la case \u00e0 cocher parente est utilis\u00e9e pour s\u00e9lectionner\/d\u00e9s\u00e9lectionner les cases \u00e0 cocher enfant.<\/p>\n<p>Dans cet article, nous \u00e9tudions comment effectuer la s\u00e9lection\/d\u00e9s\u00e9lection de plusieurs cases \u00e0 cocher \u00e0 l&rsquo;aide de jQuery.<\/p>\n<p>Notre vue finale est comme indiqu\u00e9 dans la capture d&rsquo;\u00e9cran ci-dessous. Il affiche la case \u00e0 cocher parente dans la ligne d&rsquo;en-t\u00eate et chaque ligne a sa propre case \u00e0 cocher.<\/p>\n<\/p>\n<p>En cochant la case parent, toutes les cases enfants seront coch\u00e9es. Et lorsque nous d\u00e9s\u00e9lectionnons la case parent, les cases enfants devraient \u00eatre d\u00e9coch\u00e9es. Cela dit, voyons comment appliquer plusieurs cases \u00e0 cocher s\u00e9lectionner\/d\u00e9s\u00e9lectionner \u00e0 l&rsquo;aide de jQuery.<\/p>\n<h3>Cr\u00e9er un exemple de table dans Bootstrap<\/h3>\n<p>Pour commencer, nous avons besoin d&rsquo;un tableau avec quelques enregistrements ainsi que des cases \u00e0 cocher. Dans le code ci-dessous, je cr\u00e9e une table factice \u00e0 l&rsquo;aide de <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/content\/tables\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrap<\/a>. J&rsquo;ai \u00e9galement ajout\u00e9 des entr\u00e9es factices dans le tableau.<\/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>Si vous ex\u00e9cutez le fichier HTML ci-dessus sur le navigateur, vous verrez un tableau contenant 4 lignes. La premi\u00e8re ligne est \u00e0 des fins d&rsquo;en-t\u00eate et la premi\u00e8re colonne est pour les cases \u00e0 cocher. Maintenant, nous allons \u00e9crire du code jQuery qui fait de la magie sur les cases \u00e0 cocher.<\/p>\n<h3>Code jQuery qui s\u00e9lectionne\/d\u00e9s\u00e9lectionne plusieurs cases \u00e0 cocher<\/h3>\n<p>jQuery fournit des m\u00e9thodes et des \u00e9v\u00e9nements \u00e0 l&rsquo;aide desquels nous pouvons atteindre notre objectif. Ici, j&rsquo;utiliserai l&rsquo; <code>click<\/code>\u00e9v\u00e9nement et la <code>prop<\/code>m\u00e9thode pour effectuer notre t\u00e2che.<\/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>Le code ci-dessus v\u00e9rifie si la case parent est coch\u00e9e. Si c&rsquo;est le cas, il coche toutes les cases. Lorsque vous d\u00e9cochez la case parent, toutes les cases enfants sont \u00e9galement d\u00e9coch\u00e9es.<\/p>\n<p>J&rsquo;esp\u00e8re que vous comprenez comment s\u00e9lectionner\/d\u00e9s\u00e9lectionner les cases \u00e0 cocher \u00e0 l&rsquo;aide de jQuery. J&rsquo;aimerais entendre vos pens\u00e9es dans la section des commentaires ci-dessous.<\/p>\n<h4>Articles Li\u00e9s<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-telecharger-recadrer-et-redimensionner-une-image-a-l-aide-de-jquery-et-php\/\" title=\"T\u00e9l\u00e9charger, recadrer et redimensionner l&#039;image \u00e0 l&#039;aide de jQuery et PHP\">T\u00e9l\u00e9charger, recadrer et redimensionner l&rsquo;image \u00e0 l&rsquo;aide de jQuery et PHP<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-ajouter-un-effet-d-image-de-zoom-sur-les-images-de-votre-site-web\/\" title=\"Ajoutez un effet d&#039;image de zoom sur les images de votre site Web\">Ajoutez un effet d&rsquo;image de zoom sur les images de votre site Web<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fr\/comment-implementer-jquery-datepicker-avec-timepicker\/\" title=\"Comment impl\u00e9menter jQuery Datepicker avec Timepicker\">Comment impl\u00e9menter jQuery Datepicker avec Timepicker<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans ce tutoriel, j&rsquo;\u00e9cris un code pour plusieurs cases \u00e0 cocher, d\u00e9s\u00e9lectionnez \u00e0 l&rsquo;aide de jQuery. Il est requis lors de l&rsquo;ex\u00e9cution d&rsquo;op\u00e9rations CRUD en utilisant le<\/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":[255],"tags":[844],"class_list":["post-25287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-4","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/25287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=25287"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/25287\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/21662"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=25287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=25287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=25287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}