Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript] Zaznaczanie checkbox'ów
Forum PHP.pl > Forum > Przedszkole
djgarsi
Witam. Piszę w przedszkolu, bo zapewne mój problem jest banalny, jednak wertuję forum i nie znalazłem rozwiązania mojego problemu.
Otóż muszę zaznaczyć pewien checkbox, tylko nie bardzo wiem jak.

Moje checkboxy wglądają tak:
  1. <a href="#" id="zaznacz">Zaznaczenie</a>
  2. <input type="checkbox" name="nazwa[]" value="4" />
  3. <input type="checkbox" name="nazwa[]" value="5" />
  4. <input type="checkbox" name="nazwa[]" value="6" />
  5. <input type="checkbox" name="nazwa[]" value="7" />
  6. <input type="checkbox" name="nazwa[]" value="8" />


No i tu sedno sprawy. Jak (w JS) kliknięciem w link id="zaznacz", zaznaczyć np checkbox nr 6?
Pozdrawiam.
c1chy
jeżeli używasz jQuery zadziała coś takiego:

[JAVASCRIPT] pobierz, plaintext
  1. $('#zaznacz').on('click',function(e){
  2. e.preventDefault();
  3. $('input[type="checkbox"]:nth-child(3)').attr('checked','checked');
  4. });
[JAVASCRIPT] pobierz, plaintext


ten kod zaznaczy Ci 4 element typu checkbox.

możesz tez zrobić tak:

[JAVASCRIPT] pobierz, plaintext
  1. $('#zaznacz').on('click',function(e){
  2. e.preventDefault();
  3. $('input[type="checkbox"][value="6"]').attr('checked','checked');
  4. });
[JAVASCRIPT] pobierz, plaintext


ten kod zaznaczy Ci checkbox który ma value ustawione na 6
djgarsi
Odświeżę temat bo chyba mam rozwiązanie, ale jeszcze nie działa tak jak trzeba.
Skrypt niby dodaje atrybut checked ale:
- checkbox nie zaznacza się (firefox),
- checkbox zaznacza się tylko jeden raz, a później nic nie reaguje (chrome).

Oto kody:

[JAVASCRIPT] pobierz, plaintext
  1. $(window).load(function(){
  2. $('#zaznacz1').on('click',function(e){
  3. e.preventDefault();
  4. $('input[type="checkbox"][value="4"]').attr('checked',true);
  5. $('input[type="checkbox"][value="5"]').removeAttr('checked');
  6. $('input[type="checkbox"][value="6"]').removeAttr('checked');
  7. });
  8. $('#zaznacz2').on('click',function(e){
  9. e.preventDefault();
  10. $('input[type="checkbox"][value="4"]').removeAttr('checked');
  11. $('input[type="checkbox"][value="5"]').attr('checked','checked');
  12. $('input[type="checkbox"][value="6"]').removeAttr('checked');
  13. });
  14. $('#zaznacz3').on('click',function(e){
  15. e.preventDefault();
  16. $('input[type="checkbox"][value="4"]').removeAttr('checked');
  17. $('input[type="checkbox"][value="5"]').removeAttr('checked');
  18. $('input[type="checkbox"][value="6"]').attr('checked','checked');
  19. });
  20. });
[JAVASCRIPT] pobierz, plaintext


  1. <a href="#" id="zaznacz1">Zaznaczenie1</a>
  2. <a href="#" id="zaznacz2">Zaznaczenie2</a>
  3. <a href="#" id="zaznacz3">Zaznaczenie3</a>
  4. <input type="checkbox" name="nazwa[]" value="4" />
  5. <input type="checkbox" name="nazwa[]" value="5" />
  6. <input type="checkbox" name="nazwa[]" value="6" />
b4rt3kk
Sprawa jest prosta.

  1. $('#zaznacz').click(function(){
  2. var twojaWartosc = 6;
  3. $('input[value="'+twojaWartosc+'"').attr('checked', true);
  4. });


Albo inaczej, bardziej optymalnie:

  1. <a href="#" zaznacz="1" class="zaznacz">Zaznacz 1</a>
  2. <a href="#" zaznacz="2" class="zaznacz">Zaznacz 2</a>
  3. <a href="#" zaznacz="3" class="zaznacz">Zaznacz 3</a>
  4.  
  5. <input type="checkbox" name="nazwa[]" value="1" />
  6. <input type="checkbox" name="nazwa[]" value="2" />
  7. <input type="checkbox" name="nazwa[]" value="3" />


I prosty kod jQuery:

  1. $('.zaznacz').click(function(){
  2. var twojaWartosc = $(this).attr('zaznacz');
  3. $('input[value="'+twojaWartosc+'"][name="nazwa[]"]').attr('checked', true);
  4. });
djgarsi
No super, to działa. Tylko powiedz mi jak odznaczyć pozostałe checkboxy po zaznaczeniu któregoś?
b4rt3kk
Cytat(djgarsi @ 8.08.2013, 10:38:52 ) *
No super, to działa. Tylko powiedz mi jak odznaczyć pozostałe checkboxy po zaznaczeniu któregoś?


Dodaj linijkę na początku funkcji click:

  1. $('input[type="checkbox"]').attr('checked', false);


Czyli:

  1. $('.zaznacz').click(function(){
  2. $('input[type="checkbox"]').attr('checked', false);
  3. var twojaWartosc = $(this).attr('zaznacz');
  4. $('input[value="'+twojaWartosc+'"][name="nazwa[]"]').attr('checked', true);
  5. });
djgarsi
Niestety to chyba nie działa.

http://jsfiddle.net/xGmQj/3/
semafor1985
spróbuj zamiast

  1. attr('checked', false);


dać

  1. prop('checked', false);


czyli

  1. $('.zaznacz').click(function(){
  2. $('input[type="checkbox"]').prop('checked', false);
  3. var twojaWartosc = $(this).attr('zaznacz');
  4. $('input[value="'+twojaWartosc+'"][name="nazwa[]"]').prop('checked', true);
  5. });
djgarsi
Super. Dziękuję za pomoc wink.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.