• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wykonanie akcji po zaznaczeniu checkboxa

0 głosów
79 wizyt
pytanie zadane 13 stycznia w JavaScript, jQuery, AJAX przez Domeltr Początkujący (440 p.)

Cześć wszystkim! Próbuję napisać skrypt w js, ale niestety nie wiem jak się do tego zabrać. Skrypt ma na celu, po zaznaczeniu checkboxa, dodać do diva na stronie określoną liczbę. Po odznaczeniu go natomiast przypisana do niego wartość ma zostać odjęta z wyżej wymienionego diva.

<div id="calculator">
  <label><input type="checkbox" value="10">Zaznaczenie dodaje 10</label>
  <label><input type="checkbox" value="15">Zaznaczenie dodaje 15</label>
  <label><input type="checkbox" value="20">Zaznaczenie dodaje 20</label>
  <label><input type="checkbox" value="25">Zaznaczenie dodaje 25</label>
</div>
<div id="wynik">
0 
<!--tutaj po zaznaczeniu checkboxów ma się dodać ich wartość, a więc zaznaczając
 na przykład pierwszy i drugi powinna być wartość 25. Po odznaczeniu pierwszego 
powinno zostać 15 bez przeładowywania strony-->
</div>

Znalazłem na forum kawałek kodu który mógłby mi pomóc, niestety nie wiem jak go zmodyfikować.

document.getElementById("calculator").addEventListener('change', function(e){
  	var container = document.getElementById('wynik'); //chwytamy div calculator i nasłuchujemy zmiany w zaznaczeniu checkboxów
    container.innerHTML = 'test'; //wpisywanie do diva #wynik, domyślnie pusty
  	document.querySelectorAll('#calculator input:checked').forEach(function(element){
//tu mam problem co i jak

    });
});

Jeżeli pytanie wydaje się głupie to przepraszam, dopiero się uczę. Nie jest to żadne zadanie domowe, ani nic w tym stylu, a raczej problem który postanowiłem rozwiązać żeby się czegoś nauczyć, więc bardzo proszę i z góry dziękuję za cierpliwość i wyjaśnienie w prostu sposób jak rozwiązać mój problem :)

1 odpowiedź

+1 głos
odpowiedź 13 stycznia przez Tomek Sochacki Mędrzec (183,830 p.)
wybrane 14 stycznia przez Domeltr
 
Najlepsza
Jako że to do celów nauki to pozwolę sobie dać Ci gotowca do analizy: https://codepen.io/anon/pen/YddWjJ

Generalnie jest to taka wersja bardzo podstawowa, w praktyce robi się to nieco inaczej, bardziej uniwersalnie itp. ale do nauki jest ok. Spróbuj sobie przeanalizować ten kod, poczytać o poszczególnych rzeczach w dokumentacji MDN, a jak coś będzie niejasne to pisz :)
komentarz 13 stycznia przez Domeltr Początkujący (440 p.)
Dziękuję bardzo! Mógłbym też ewentualnie podesłać mój kod dla chociażby podstawowego code review? Chciałbym wiedzieć czy czegoś nie robię/nie rozumiem w zły sposób :)
komentarz 13 stycznia przez Tomek Sochacki Mędrzec (183,830 p.)
daj na forum to inni też pewnie zerkną na to.
komentarz 14 stycznia przez Domeltr Początkujący (440 p.)
Źle się wyraziłem, miałem na myśli wstawienie kodu tutaj :)

Podobne pytania

0 głosów
0 odpowiedzi 50 wizyt
0 głosów
0 odpowiedzi 57 wizyt
0 głosów
1 odpowiedź 76 wizyt
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

64,845 zapytań

111,307 odpowiedzi

234,116 komentarzy

46,718 pasjonatów

Przeglądających: 172
Pasjonatów: 7 Gości: 165

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...