[HTML][JavaScript] Zaznaczanie checkbox'ów Opcje

[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:

[HTML] pobierz, plaintext 
<a href="#" id="zaznacz">Zaznaczenie</a>
<input type="checkbox" name="nazwa[]" value="4" />
<input type="checkbox" name="nazwa[]" value="5" />
<input type="checkbox" name="nazwa[]" value="6" />
<input type="checkbox" name="nazwa[]" value="7" />
<input type="checkbox" name="nazwa[]" value="8" />
[HTML] pobierz, plaintext 

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 
$('#zaznacz').on('click',function(e){
     e.preventDefault();
     $('input[type="checkbox"]:nth-child(3)').attr('checked','checked');
});
[JAVASCRIPT] pobierz, plaintext 

ten kod zaznaczy Ci 4 element typu checkbox.

możesz tez zrobić tak:

[JAVASCRIPT] pobierz, plaintext 
$('#zaznacz').on('click',function(e){
     e.preventDefault();
     $('input[type="checkbox"][value="6"]').attr('checked','checked');
});
[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

[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 
$(window).load(function(){
			$('#zaznacz1').on('click',function(e){
				e.preventDefault();
				$('input[type="checkbox"][value="4"]').attr('checked',true);
				$('input[type="checkbox"][value="5"]').removeAttr('checked');
				$('input[type="checkbox"][value="6"]').removeAttr('checked');
			});
			$('#zaznacz2').on('click',function(e){
				e.preventDefault();
				$('input[type="checkbox"][value="4"]').removeAttr('checked');
				$('input[type="checkbox"][value="5"]').attr('checked','checked');
				$('input[type="checkbox"][value="6"]').removeAttr('checked');
			});
			$('#zaznacz3').on('click',function(e){
				e.preventDefault();
				$('input[type="checkbox"][value="4"]').removeAttr('checked');
				$('input[type="checkbox"][value="5"]').removeAttr('checked');
				$('input[type="checkbox"][value="6"]').attr('checked','checked');
			});
			}); 
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<a href="#" id="zaznacz1">Zaznaczenie1</a>
<a href="#" id="zaznacz2">Zaznaczenie2</a>
<a href="#" id="zaznacz3">Zaznaczenie3</a>
<input type="checkbox" name="nazwa[]" value="4" />
<input type="checkbox" name="nazwa[]" value="5" />
<input type="checkbox" name="nazwa[]" value="6" />
[HTML] pobierz, plaintext 

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

[b4rt3kk]

Sprawa jest prosta.

[HTML] pobierz, plaintext 
$('#zaznacz').click(function(){
  var twojaWartosc = 6;
  $('input[value="'+twojaWartosc+'"').attr('checked', true);
});
[HTML] pobierz, plaintext 

Albo inaczej, bardziej optymalnie:

[HTML] pobierz, plaintext 
<a href="#" zaznacz="1" class="zaznacz">Zaznacz 1</a>
<a href="#" zaznacz="2" class="zaznacz">Zaznacz 2</a>
<a href="#" zaznacz="3" class="zaznacz">Zaznacz 3</a>
 
<input type="checkbox" name="nazwa[]" value="1" />
<input type="checkbox" name="nazwa[]" value="2" />
<input type="checkbox" name="nazwa[]" value="3" />
[HTML] pobierz, plaintext 

I prosty kod jQuery:

[HTML] pobierz, plaintext 
$('.zaznacz').click(function(){
  var twojaWartosc = $(this).attr('zaznacz');
  $('input[value="'+twojaWartosc+'"][name="nazwa[]"]').attr('checked', true);
});
[HTML] pobierz, plaintext 

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

[djgarsi]

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

[b4rt3kk]

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

Dodaj linijkę na początku funkcji click:

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

Czyli:

[HTML] pobierz, plaintext 
$('.zaznacz').click(function(){
    $('input[type="checkbox"]').attr('checked', false);
    var twojaWartosc = $(this).attr('zaznacz');
    $('input[value="'+twojaWartosc+'"][name="nazwa[]"]').attr('checked', true);
});
[HTML] pobierz, plaintext 

[djgarsi]

Niestety to chyba nie działa.

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

[semafor1985]

spróbuj zamiast

[PHP] pobierz, plaintext 
attr('checked', false);
[PHP] pobierz, plaintext 

dać

[PHP] pobierz, plaintext 
prop('checked', false);
[PHP] pobierz, plaintext 

czyli

[PHP] pobierz, plaintext 
    $('.zaznacz').click(function(){
    $('input[type="checkbox"]').prop('checked', false);
    var twojaWartosc = $(this).attr('zaznacz');
    $('input[value="'+twojaWartosc+'"][name="nazwa[]"]').prop('checked', true);
    });
[PHP] pobierz, plaintext 

Ten post edytował semafor1985 8.08.2013, 10:42:01

[djgarsi]

Super. Dziękuję za pomoc (IMG:style_emoticons/default/wink.gif)