Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript] Zaznaczanie checkbox'ów
djgarsi
post 1.07.2013, 22:09:44
Post #1





Grupa: Zarejestrowani
Postów: 459
Pomógł: 26
Dołączył: 1.06.2009

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
c1chy
post 1.07.2013, 22:53:09
Post #2





Grupa: Zarejestrowani
Postów: 72
Pomógł: 16
Dołączył: 21.06.2013

Ostrzeżenie: (0%)
-----


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

Ten post edytował c1chy 1.07.2013, 22:54:38


--------------------
devstrefa.wordpress.com
Go to the top of the page
+Quote Post
djgarsi
post 8.08.2013, 09:15:20
Post #3





Grupa: Zarejestrowani
Postów: 459
Pomógł: 26
Dołączył: 1.06.2009

Ostrzeżenie: (0%)
-----


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" />


Ten post edytował djgarsi 8.08.2013, 09:16:50


--------------------
Go to the top of the page
+Quote Post
b4rt3kk
post 8.08.2013, 09:22:03
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----


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. });


Ten post edytował b4rt3kk 8.08.2013, 09:26:40


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
djgarsi
post 8.08.2013, 09:38:52
Post #5





Grupa: Zarejestrowani
Postów: 459
Pomógł: 26
Dołączył: 1.06.2009

Ostrzeżenie: (0%)
-----


No super, to działa. Tylko powiedz mi jak odznaczyć pozostałe checkboxy po zaznaczeniu któregoś?


--------------------
Go to the top of the page
+Quote Post
b4rt3kk
post 8.08.2013, 09:58:15
Post #6





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----


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. });


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
djgarsi
post 8.08.2013, 10:04:23
Post #7





Grupa: Zarejestrowani
Postów: 459
Pomógł: 26
Dołączył: 1.06.2009

Ostrzeżenie: (0%)
-----


Niestety to chyba nie działa.

http://jsfiddle.net/xGmQj/3/


--------------------
Go to the top of the page
+Quote Post
semafor1985
post 8.08.2013, 10:41:36
Post #8





Grupa: Zarejestrowani
Postów: 61
Pomógł: 3
Dołączył: 18.10.2012
Skąd: Zagłębie Dąbrowskie

Ostrzeżenie: (0%)
-----


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. });


Ten post edytował semafor1985 8.08.2013, 10:42:01
Go to the top of the page
+Quote Post
djgarsi
post 8.08.2013, 10:48:59
Post #9





Grupa: Zarejestrowani
Postów: 459
Pomógł: 26
Dołączył: 1.06.2009

Ostrzeżenie: (0%)
-----


Super. Dziękuję za pomoc wink.gif


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 18:00