JS Problem-wyświetlanie zaznaczonych checkboxów

pytanie zadane 1 października 2020 w JavaScript przez dimek72 Nowicjusz (180 p.)
zamknięte 3 października 2020 przez dimek72

Witam. Jak w temacie,jak wyświetlić zaznaczone wartosci w checkbox (w tym przypadku zainteresowania) w jednej funkcji albo jak to wszystko połączyć w całą spójność? Z góry dzięki za pomoc.

Fragment kodu:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Formularze</title>
    <script>
   function ustawionana()
    {
        //wartosci
        var imiee=(document.getElementById("imie").value);
           var nazw=(document.getElementById("nazwisko").value);

  document.write("Imie:"+imiee+"<br>"+"Nazwisko:"+nazw+"<br>");

}

</script></head><body>

 Podaj imię: <input type="text" id="imie"> <br>
        Podaj nazwisko: <input type="text" id="nazwisko"><br>


Jakie masz zainteresowania?
<br>
<input type="checkbox" name="Muzyka" value="Muzyka">Muzyka<br>
<input type="checkbox" name="Literatura" value="Literatura">Literatura<br>
<input type="checkbox" name="sport" value="Sport">Sport<br>
<input type="checkbox" name="sztuka" value="Sztuka">Sztuka<br>


<input type="reset" value="Wyczyść" >
  <input  onclick="ustawionana()" type="button" value="Wyślij">

</body>
</html>

komentarz zamknięcia: solved

1 odpowiedź

odpowiedź 2 października 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 3 października 2020 przez ScriptyChris

Najlepsza

W funkcji ustawionana() możesz dodać taki kod:

            const hobbys = [];
            const hobbyInputs = document.querySelectorAll('input[type=checkbox]:checked');
            hobbyInputs.forEach(element => {
                hobbys.push(element.value);
            });

utworzy Ci to pustą tablice z listą zainteresowań, następnie pobierze elementy checkbox, które są zaznaczone i zostanie z nich utworzona kolejna tablica. W ostatnim kroku przeiteruje Ci po wszystkich elementach z tablicy hobbyInputs zawierającej zaznaczone checkboxy i umieści w tablicy hobbys tylko ich wartości (value).

 document.write("Imie:" + imiee + "<br>" + "Nazwisko:" + nazw + "<br>" + hobbys);

komentarz 2 października 2020 przez VBService Ekspert (253,340 p.)
edycja 2 października 2020 przez VBService

document.write("Imie: " + imiee + "<br>Nazwisko: " + nazw + "<br>Hobby: " + hobbys.toString().replace(',',', '));

    function ustawionana() {
        //wartosci
        let imie = document.getElementById('imie').value;
        let nazwisko = document.getElementById('nazwisko').value;

        const hobbys = [];
        const hobby_inputs = document.querySelectorAll('input[type=checkbox]:checked');

        hobby_inputs.forEach((checkbox) => {
            hobbys.push(checkbox.value);
        });

        document.write("Imie: " + imie + "<br>Nazwisko: " + nazwisko + "<br>Hobby: " + hobbys.toString().replace(',',', '));
    }