Zaznaczenie i odznaczenie chceckboxow, ale tylko w jednym formularzu

Question

Witam!

Chciałbym, żeby móc zaznaczyć wszystkie chceckboxy i je odznaczyć, ale tylko w jednym formularzu. Mam dwie wersje:

Pierwsza zaznacza wszystkie checkboxy na stronie:

function selectAll(x,b) { 
   if (typeof(x)=='string')x=document.getElementById(x);
   else { 
      while(x=x.parentNode) {
         if (x.nodeName.toLowerCase()=='form')break;
      }
   }
   var ins=x.getElementsByTagName("input"); 
   for(j=0;j<ins.length;j++) { 
      if(ins[j].type.toLowerCase()=="checkbox") { 
         ins[j].checked=b; 
      } 
   } 
}

 

<form method="POST" class="form-inline" role="form">
<input type="button" onClick="selectAll(this,true)" value="zaznacz wszystkie" /><br>
<input type="button" onClick="selectAll(this)" value="odznacz wszystkie" /><br>
</form>

ALE nie oto mi chodzi. Ja chcę zaznaczyć tylko w jednym formularzu. Ten powyżej działa poprawnie

Druga zaznacza wszystkie checkboxy w jednym formularzu:

function selectAll(x,b) { 
   if (typeof(x)=='string')x=document.getElementById(x);
   else { 
      while(x=x.parentNode) {
         if (x.nodeName.toLowerCase()=='form')break;
      }
   }
   var ins=x.getElementsByTagName("input"); 
   for(j=0;j<ins.length;j++) { 
      if(ins[j].type.toLowerCase()=="checkbox") { 
         ins[j].checked=b; 
      } 
   } 
}

 

<form name="aaa" method="POST" class="form-inline" role="form">
<input type="button" onClick="selectAll('aaa',true)" value="zaznacz wszystkie" /><br>
<input type="button" onClick="selectAll('aaa')" value="odznacz wszystkie" /><br>
</form>

i ten nie działa właśnie... czy może mi ktos powiedzieć gdzie jest błąd??

Comments

Wkleiłeś dwa razy tą samą funkcję.

---

Jak przerobić tą funkcję, żeby zaznaczała checkboxy tylko z jednego formularza??

<form name="aaa" method="POST" class="form-inline" role="form">
<input type="button" onClick="selectAll('aaa',true)" value="zaznacz wszystkie" /><br>
<input type="button" onClick="selectAll('aaa')" value="odznacz wszystkie" /><br>
</form>

 

---

Chodzi Ci o to, że masz dwa formularze a w nich checkboxy i przyciski którymi można je zaznaczyć/odznaczyć, dobrze rozumiem?

---

Dokładnie tak. Mam dwa formularze ;) i checkboxy w obu.

Problem w tym, że jak chcę zaznaczyć tylko w jednym formularzu to zaznaczają mi się w obu tzn. we wszystkich formularzach jakie mam na stronie. Maja się zaznaczać tylko w jednym.

---

onClick

https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener

Answer 1

Aby nie brnąc w ten kod stworzyłem sytuację o którą wydaje mi się, że chodzi. Nie jest to może optymalna wersja, ale mam nadzieję czytelna.

https://codepen.io/Nilmerg/pen/yvROgy?editors=1010

Co do Twojej funkcji. Nie powinno się dodawać "inline" funkcji do elementów (czyli bezpośrednio w kodzie html).

Przycisk można by zrobić również tylko jeden i zamieniać jedynie jego tekst po kliknięciu.

Trochę chaotycznie chodzisz po DOM (aczkolwiek mi też się zdarza :) )

 

Comments

Zrobiłem tak ;)

function makeCheck(thisForm)
{

for (i = 0; i < thisForm.all.length; i++)
{
thisForm.all[i].checked=true
}

}

function makeUncheck(thisForm)
{

for (i = 0; i < thisForm.all.length; i++)
{
thisForm.all[i].checked=false
}

<form method="POST" action="mod_box.php" class="form-inline" role="form">

<input id="all"  type="checkbox" style="width: 20px; height: 20px;">
<input id="all"  type="checkbox" style="width: 20px; height: 20px;">
<input id="all"  type="checkbox" style="width: 20px; height: 20px;">

<input type="button" value="Zaznacz" onclick="makeCheck(this.form)" class="btn checkall"> 
<input type="button" value="Odznacz" onclick="makeUncheck(this.form)" class="btn uncheckall">

</form>

Wszystko ładnie działa ;) ale zaznacza mi dopiero jak w formularzu jest więcej niż jeden chackbox. Jak jest jeden to nie chce mi zaznaczyć... Zapewne w kodzie js trzeba było coś poprawić... Wiesz może gdzie?? ;) Z góry dzięki ;)

---

ID powinno być unikalne, a u Ciebie wszystkie checkbox-y mają te same ID. Nadaj im taką samą klasę i w JS użyj np. querySelectorAll.

To:

i = 0;

powoduje, że i jest zmienną globalną - użyj let.

Niepotrzebnie mieszasz warstwy, do podpięcia eventu powinieneś skorzystać z addEventListener

---

@gremlin,
Ten kod działa tylko jeżeli sam nie zaznaczysz jakiegoś checkboxa.

---

Faktycznie, pisałem to późno na szybko. Niepotrzebnie używając setAttribute, już poprawione.

Answer 2

Może takie rozwiązanie ?

Comments

Dzieki :) a daloby sie tak. zrobic, ze kazdy przycisk mial swojego onClicka. Naciskam na zaznacz wykonuje sie funkcja odpowiedzialna za zaznaczenie. Naciskam na klawisz odznacz i wykonuje sie funkcja odpowiedzialna za odznaczenia. Kazdy button bedzie mial w sobie onclicka kierujacego do odpowiedniej funkcji. Reszta jest super oto wlasnie chodzi :)

---

Oczywiście. Zapoznaj się tak jak napisał xmentor z addEventListener