poniedziałek, 2020-11-30

JS: Masowe zaznaczanie pól formularza

Możliwość jednoczesnego zaznaczenia kilku kontrolek formularza to spore usprawnienie pracy użytkownika. Słowo „masowe” w tytule może wydać się przesadą, jednak prezentowane skrypty JavaScript bez najmniejszej modyfikacji będą działać na większej ilości pól, je dopisanych w kodzie HTML.

Przykład nr 1 – zaznaczanie wszystkich opcji

Kod HTML przykładu

<div id="tester-1">
  <p>Zaznacz interesujące przedmioty</p>
  <label><input type="checkbox"> zaznacz wszystkie</label>
  <label><input type="checkbox"> matematyka</label>
  <label><input type="checkbox"> język polski</label>
  <label><input type="checkbox"> wychowanie fizyczne</label>
</div>

Kod JavaScript przykładu

Sposób działania prezentowanego kodu jest bardzo prosty. Jeśli zaznaczono pierwszy checkbox, w pętli wszystkie pola tego typu kolejno mają modyfikowaną własność checked na true (co oznacza zaznaczenie).

document.querySelector('#tester-1 input').onchange = function() {
  if(this.checked) {
    var inputs = document.querySelectorAll('#tester-1 input');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].checked = true;
    }
  }
}

Przykład nr 2 – odwracanie zaznaczenia

Kod HTML przykładu

<div id="tester-2">
  <p>Zaznacz interesujące przedmioty</p>
  <label><input type="checkbox"> odwróć zaznaczenie</label>
  <label><input type="checkbox"> matematyka</label>
  <label><input type="checkbox"> język polski</label>
  <label><input type="checkbox"> wychowanie fizyczne</label>
</div>

Kod JavaScript przykładu

Odwrócenie zaznaczenia tylko pozornie jest trudniejszym zadaniem. „Odwrócenie” oznacza przyjęcie przeciwstawnej wartości własności checked, można to zrealizować poprzez ustawienie zaprzeczenia aktualnej wartości własności checked elementu (!inputs[i].checked).

document.querySelector('#tester-2 input').onchange = function() {
 var inputs = document.querySelectorAll('#tester-2 input');
 if(this.checked) {
  for (var i = 1; i < inputs.length; i++) {
    inputs[i].checked = !inputs[i].checked;
  }
 }
}

Przykład nr 3 – losowe zaznaczanie

Kod HTML przykładu

Zgodnie z zasadami elementy input dotyczące danej odpowiedzi mają takie same atrybuty name. W przykładzie występują dwa pytania.

<div id="tester-3">
  <div>
  <p>Wybierz najnowszy system z wymienionych:</p>
  <label><input name="p1" type="radio"> Ubuntu 10.10</label>
  <label><input name="p1" type="radio"> Debian 4.0</label>
  <label><input name="p1" type="radio"> MS-DOS 7.2</label>
  <label><input name="p1" type="radio"> Windows 7</label>
  <p>Jest wykorzystywany jako dodatkowa pamięć wspomagająca...</p>
  <label><input name="p2" type="radio"> pagefile.sys</label>
  <label><input name="p2" type="radio"> cmd.exe</label>
  <label><input name="p2" type="radio"> hiberfil.sys</label>
  <label><input name="p2" type="radio"> sysdm.cpl</label>
  </div>
  <button>Losowo wybierz odpowiedzi</button>
</div>

Kod JavaScript przykładu

Przyjęte rozwiązanie to dwa główne kroki. Najpierw w pierwszej pętli ustalono wszystkie unikalne atrybuty name kontrolek radio i zliczono ich ilości. W drugim kroku zastosowano kolejną pętlę, tym razem w każdym kolejnym przejściu w zmiennej i znalazł się jeden z unikalnych atrybutów name ustalonych w poprzednim kroku. W pętli początkowo pobierane są wszystkie elementy z takim samym atrybutem name (czyli wszystkie możliwe odpowiedzi na dane pytanie). Następnie pseudolosowo ustalany jest indeks zaznaczonego pola.

document.querySelector('#tester-3 button').onclick = function() {
  var uniq = [];
  var tmp;
  var inputs = document.querySelectorAll('#tester-3 input');
  for (var i = 0; i < inputs.length; i++) {
    uniq[inputs[i].name] || (uniq[inputs[i].name] = 0);
    uniq[inputs[i].name]++;
  }
  for(i in uniq) {
    tmp = document.querySelectorAll('#tester-3 input[name='+i+']');
    tmp[Math.floor(Math.random() * uniq[i])].checked = true;
  }
}