Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Małe pytanko (onClick)
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
MadMark
9.09.2010, 18:51:06
Witam,

Jak zrobić, aby po kliknięciu na komórkę tabeli zaznaczył się również checkbox w niej zawarty, jeśli wiem, iż będzie tam tylko 1 checkbox o takim samym ID jak dana komórka ?

Z góry dziękuję za pomoc.
kamil4u
9.09.2010, 19:03:41
ID jest unikalne i nie może się powtarzaćexclamation.gif
Jak będzie tam jeden checkbox to najłatwiej zrobić tak:
Kod
referencja_do_elementu_td.onclick = function(el){ (el = this.getElementByTagName('input')[0]).checked = !el.checked; /*ew. el._zdarzenie_(); */  }

Jak będzie więcej, niż jeden input to musisz przelecieć po wszystkim pętlą i spr odpowiednim warunkiem. Zamiast referencja_do_elementu_td możesz użyć atrybutu onclick. Poczytaj też o DOM.
Dapi
9.09.2010, 19:06:21
Może
Kod
onclick="document.getElementById('idcheckboxa').checked = true;"

Do tego warunek, że jeśli zaznaczone to zamaist true wstawia false smile.gif

Edit:

Up. Co do id to faktycznie, ale checkbox może mieć np na końcu dodane "a" a komórka tabeli nie.
MadMark
9.09.2010, 19:12:36
Cytat(Dapi @ 9.09.2010, 20:06:21 ) *
Może
Kod
onclick="document.getElementById('idcheckboxa').checked = true;"

Do tego warunek, że jeśli zaznaczone to zamaist true wstawia false smile.gif

Edit:

Up. Co do id to faktycznie, ale checkbox może mieć np na końcu dodane "a" a komórka tabeli nie.



Dokładnie.
Teraz jeszcze by się przydała informacja - jak po ponownym kliknięciu odznaczyć checkboxa? smile.gif
kamil4u
9.09.2010, 19:20:56
Każdej komórce i checkboxowi nadawać id? IMO niepotrzebna robota, wystarczy znać podstawy DOM, chyba, że chodzi tylko o 1 checkbox-a, wtedy po mojemu jest bezsensu smile.gif
Cytat
Teraz jeszcze by się przydała informacja - jak po ponownym kliknięciu odznaczyć checkboxa? smile.gif

Powinieneś się domyśleć po moim kodzie, ale cóż, może za dużo wymagam tongue.gif
Kod
onclick="(var el = document.getElementById('idcheckboxa')).checked = !el.checked;"

Jak masz jakieś pytania to pytaj
MadMark
9.09.2010, 19:35:11
Tak mam pytanie.

Jeśli bym chciał to połączyć ze zmianą klasy po kliknięciu na komórkę:
[HTML] pobierz, plaintext 
  1. <script language="JavaScript" type="text/javascript">
  2. function Choosen(obj){
  3. 	if(obj.className!="klasa"){
  4. 	obj.className="klasa";}
  5. 	else{
  6. 	obj.className="klasa2";}
  7. }
  8. </script>
[HTML] pobierz, plaintext

ale tym razem dla dowolnych id ?
kamil4u
9.09.2010, 19:43:11
Mógłbyś trochę jaśniej? Teraz strzelam:
Kod
onclick="(var el = document.getElementById('idcheckboxa')).checked = !el.checked; Choosen(this);"

W tej sytuacji jako parametr funkcji "leci" element, na którym wywołano zdarzenie click - w Twoim przypadku pewnie komórka tableli
MadMark
9.09.2010, 19:53:42
Cytat(kamil4u @ 9.09.2010, 20:43:11 ) *
Mógłbyś trochę jaśniej? Teraz strzelam:
Kod
onclick="(var el = document.getElementById('idcheckboxa')).checked = !el.checked; Choosen(this);"

W tej sytuacji jako parametr funkcji "leci" element, na którym wywołano zdarzenie click - w Twoim przypadku pewnie komórka tableli



Nie, to nie działa.

Prosty przykład:
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. .choosen2
  3. {
  4. 	color: silver;
  5. 	background-color: #1b1b1b;
  6. }
  7. .choosen
  8. {
  9. 	color: green;
  10. 	background-color: #525252;
  11. 	cursor: default;
  12. }
  13. </style>
  14. <script language="JavaScript" type="text/javascript">
  15. /*<![CDATA[*/
  16. function Choosen(obj){
  17. 	if(obj.className!="choosen"){
  18. 	obj.className="choosen";
  19. 	document.getElementById('C01').checked = true;}
  20. 	else{
  21. 	obj.className="choosen2";
  22. 	document.getElementById('C01').checked = false;}
  23. }
  24. /*]]>*/
  25. </script>
  26. </head>
  27. <body>
  28. <table cellpadding="5" cellspacing="1" bgcolor="black" width="500" style="color: white;" align="center" valign="middle">
  29. 	<tr>
  30. 		<td valign="middle" onClick="Choosen(this);" width="150" id="01">
  31. 			jakieś badziewie
  32. 			<input type="checkbox" id="C01" />
  33. 		</td>
  34. 		<td id="idem" valign="top">
  35. 			<span>opis jakiegoś badziewia</span>
  36. 		</td>
  37. 	</tr>
  38. </table>
  39. </body>
[HTML] pobierz, plaintext


I chciałbym, aby dla każdego C0X w komórce 0X po kliknięciu tak się działo.
kamil4u
9.09.2010, 20:37:44
To jednak musisz to zrobić po mojemu smile.gif
Kod
<style type="text/css">
.choosen2
{
    color: silver;
    background-color: #1b1b1b;
}
.choosen
{
    color: green;
    background-color: #525252;
    cursor: default;
}
</style>
<script language="JavaScript" type="text/javascript">

function Choosen(obj){
    if(obj.className!="choosen"){
    obj.className="choosen";
    obj.getElementsByTagName('input')[0].checked = true;}
    else{
    obj.className="choosen2";
    obj.getElementsByTagName('input')[0].checked = false;
        }
}

onload = function(){
var els = document.getElementsByName('TWOJA_NAZWA'),i,el;
for(i=0; el=els[i++];)
  el.onclick = function(){ Choosen(this); };
}
</script>
</head>
<body>
<table cellpadding="5" cellspacing="1" bgcolor="black" width="500" style="color: white;" align="center" valign="middle">
    <tr>
        <td valign="middle" width="150" name="TWOJA_NAZWA">
            jakieś badziewie
            <input type="checkbox">
        </td>
        <td id="idem" valign="top">
            <span>opis jakiegoś badziewia</span>
        </td>
    </tr>
    <tr>
        <td valign="middle" width="150" name="TWOJA_NAZWA">
            jakieś badziewie
            <input type="checkbox">
        </td>
        <td id="idem" valign="top">
            <span>opis jakiegoś badziewia</span>
        </td>
    </tr>
    <tr>
        <td valign="middle" width="150" name="TWOJA_NAZWA">
            jakieś badziewie
            <input type="checkbox">
        </td>
        <td id="idem" valign="top">
            <span>opis jakiegoś badziewia</span>
        </td>
    </tr>
    <tr>
        <td valign="middle" width="150" name="TWOJA_NAZWA">
            jakieś badziewie
            <input type="checkbox">
        </td>
        <td id="idem" valign="top">
            <span>opis jakiegoś badziewia</span>
        </td>
    </tr>
</table>
</body>


Mógłbyś się bawić jeszcze z ID, ale to raczej nie najlepszy pomysł:
Kod
<style type="text/css">
.choosen2
{
    color: silver;
    background-color: #1b1b1b;
}
.choosen
{
    color: green;
    background-color: #525252;
    cursor: default;
}
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Choosen(obj,i){
    if(obj.className!="choosen"){
    obj.className="choosen";
    document.getElementById('C0'+i).checked = true;}
    else{
    obj.className="choosen2";
    document.getElementById('C0'+i).checked = false;}
}
/*]]>*/
</script>
</head>
<body>
<table cellpadding="5" cellspacing="1" bgcolor="black" width="500" style="color: white;" align="center" valign="middle">
    <tr>
        <td valign="middle" onClick="Choosen(this,1);" width="150" id="01">
            jakieś badziewie
            <input type="checkbox" id="C01" />
        </td>
        <td id="idem" valign="top">
            <span>opis jakiegoś badziewia</span>
        </td>
    </tr>
    <tr>
        <td valign="middle" onClick="Choosen(this,2);" width="150" id="02">
            jakieś badziewie
            <input type="checkbox" id="C02" />
        </td>
        <td id="idem" valign="top">
            <span>opis jakiegoś badziewia</span>
        </td>
    </tr>
</table>
</body>
MadMark
9.09.2010, 22:01:10
Dzięki bardzo, klient usatysfakcjonowany biggrin.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.