Javascript – počítadlo zakliknutých položek v checkboxu

18. 5. 2014 12:15:23

Dobrý den,

řeším problém s odpočítávadlem zaklinutých položek v checkboxu. Uživatelé můžou vybrat maximálně 10 položek a tím pádem se při zakliknutí checkboxu proměnná sníží o 1. Nevím si ale rady s tím, jak proměnnou navýšit, pokud uživatel checkbox odznačí.

Zatím to mám řešené takto:

V body se pak vypíše, kolik položek může ještě uživate vybrat:

Při kliknutí na položku formuláře se hodnota clicks sníží o 1:

Věděl by někdo, jak hodnotu clicks navýšit o 1, když uživatel checkbox odznačí?

Děkuji předem za odpověď.

18. 5. 2014 12:15:23

https://webtrh.cz/diskuse/javascript-pocitadlo-zakliknutych-polozek-v-checkboxu#reply1024115

Tomáš Pavlík

(8 hodnocení)

18. 5. 2014 13:22:52

Řeš to přes jQuery. Tam si vytvoř událost po kliku na checkbox, ve které zkontroluješ, zda je checkbox zakliknutý nebo ne a podle toho inkrementuješ nebo dekrementuješ proměnnou a vypíšeš ji.

18. 5. 2014 13:22:52

https://webtrh.cz/diskuse/javascript-pocitadlo-zakliknutych-polozek-v-checkboxu#reply1024114

sqrt

18. 5. 2014 13:26:36

<!doctype html><html>    <head>        <meta charset="utf-8" />        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>        <script>            $(function() {                var $boxes = $('');                var $counter = $('#pocitadlo');                var count = 10;                $(document).on('click', '', function() {                    var checked = $boxes.filter(':checked').length;                    var remains = count - checked;                    $counter.text(remains);                    if (!remains) {                        $boxes.prop('disabled', true);                        alert("Vybrali jste 10 položek. Nyní vaše hlasování odešlete.");                    }                });            });        </script>    </head>    <body>        <p>            Můžete ještě vybrat <span id="pocitadlo">10</span> položek.        </p>        <input id="c01" type="checkbox" /><label for="c01">Položka 1</label><br />        <input id="c02" type="checkbox" /><label for="c02">Položka 2</label><br />        <input id="c03" type="checkbox" /><label for="c03">Položka 3</label><br />        <input id="c04" type="checkbox" /><label for="c04">Položka 4</label><br />        <input id="c05" type="checkbox" /><label for="c05">Položka 5</label><br />        <input id="c06" type="checkbox" /><label for="c06">Položka 6</label><br />        <input id="c07" type="checkbox" /><label for="c07">Položka 7</label><br />        <input id="c08" type="checkbox" /><label for="c08">Položka 8</label><br />        <input id="c09" type="checkbox" /><label for="c09">Položka 9</label><br />        <input id="c10" type="checkbox" /><label for="c10">Položka 10</label><br />        <input id="c11" type="checkbox" /><label for="c11">Položka 11</label><br />        <input id="c12" type="checkbox" /><label for="c12">Položka 12</label><br />        <input id="c13" type="checkbox" /><label for="c13">Položka 13</label><br />        <input id="c14" type="checkbox" /><label for="c14">Položka 14</label><br />        <input id="c15" type="checkbox" /><label for="c15">Položka 15</label><br />        <input id="c16" type="checkbox" /><label for="c16">Položka 16</label><br />        <input id="c17" type="checkbox" /><label for="c17">Položka 17</label><br />        <input id="c18" type="checkbox" /><label for="c18">Položka 18</label><br />        <input id="c19" type="checkbox" /><label for="c19">Položka 19</label><br />        <input id="c20" type="checkbox" /><label for="c20">Položka 20</label><br />    </body></html>

18. 5. 2014 13:26:36

https://webtrh.cz/diskuse/javascript-pocitadlo-zakliknutych-polozek-v-checkboxu#reply1024113

JosefKerner

18. 5. 2014 13:27:43

A použij jQuery :).

18. 5. 2014 13:27:43

https://webtrh.cz/diskuse/javascript-pocitadlo-zakliknutych-polozek-v-checkboxu#reply1024112

maresj

(26 hodnocení)

18. 5. 2014 13:50:25

Skvělé! :) Děluji vám všem za odpovědi.

18. 5. 2014 13:50:25