Mój kod HTML:

<ul class="nav md-pills pills-default flex-column" role="tablist">
    <li class="nav-item">
        <input type="radio" name="q01" value="1" hidden checked>
        <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="2" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="3" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>
    </li>
    <li class="nav-item">
        <input type="radio" name="q01" value="4" hidden>
        <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>
    </li>
</ul>

Mój kod JS:

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k=0; k<choices01.length; k++) {
    choices01[k].addEventListener("click", function(){
        inputs01[k].checked = true;
    });
}

Mam kilka pytań, z których każde ma element „a” i klasę „choice [numberOfTheQuestion]”. Dla każdego z nich mam ukryte wejście radiowe, które chciałbym sprawdzić po kliknięciu na element „a”.

Jednak kiedy robię console.log (input01 [k]) w for i klikam wtedy jedną z 4 opcji, ta jest wyświetlana bez zaznaczenia, jakbym nie kliknął.

Uwaga: input01 [k] odsyła mi prawidłowy element, na który kliknąłem ...

0
Malron 2 kwiecień 2020, 06:19

3 odpowiedzi

Najlepsza odpowiedź

element.checked = true; działa, po prostu nie modyfikuje HTML.

Aby sprawdzić, czy element jest dobrze sprawdzony, nie powinieneś robić console.log(element) (co po prostu zwróci element bez zaznaczenia), ale raczej wykonaj console.log(element.checked) i zajrzyj do konsoli, jeśli mamy true (zaznaczone) lub fałsz (niezaznaczone).


0
Malron 4 kwiecień 2020, 23:13

Nie jest jasne, czego oczekujesz od swojego pytania. Ustawiłeś ukrytą właściwość dla danych wejściowych, więc nie będzie się ona pojawiać, ale zmieniła się po kliknięciu znaczników a.

Jeśli chcesz, aby przycisk opcji był zaznaczony po kliknięciu określonego tagu, musisz ustawić właściwość hidden tego konkretnego wejścia na false. https://jsfiddle.net/y718p9k3/3/

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k=0; k<choices01.length; k++) {
    choices01[k].addEventListener("click", function(){
        inputs01[k].checked = true;
        for (let j=0;j<inputs01.length;j++) {
            inputs01[j].hidden = true;
        }
        inputs01[k].hidden = false;
    });
}
0
run_time_error 2 kwiecień 2020, 03:56

Ustawienie właściwości checked wydaje się nie działać, ale setAttribute działa. Kliknięcie poniżej powoduje przejście właściwości checked z false do true, jak widać w dziennikach:

const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");

for (let k = 0; k < choices01.length; k++) {
  choices01[k].addEventListener("click", function() {
    console.log(inputs01[k].checked);
    inputs01[k].setAttribute('checked', true);
    console.log(inputs01[k].checked);
  });
}
<ul class="nav md-pills pills-default flex-column" role="tablist">
  <li class="nav-item">
    <input type="radio" name="q01" value="1" checked hidden>
    <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>
  </li>
  <li class="nav-item">
    <input type="radio" name="q01" value="2" hidden>
    <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>
  </li>
  <li class="nav-item">
    <input type="radio" name="q01" value="3" hidden>
    <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>
  </li>
  <li class="nav-item">
    <input type="radio" name="q01" value="4" hidden>
    <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>
  </li>
</ul>
0
CertainPerformance 2 kwiecień 2020, 03:26