Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Małe pytanko (onClick)
MadMark
post
Post #1





Grupa: Zarejestrowani
Postów: 105
Pomógł: 3
Dołączył: 12.07.2010

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

ID jest unikalne i nie może się powtarzać(IMG:style_emoticons/default/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.
Go to the top of the page
+Quote Post
Dapi
post
Post #3





Grupa: Zarejestrowani
Postów: 186
Pomógł: 13
Dołączył: 7.08.2009

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

Może
Kod
onclick="document.getElementById('idcheckboxa').checked = true;"

Do tego warunek, że jeśli zaznaczone to zamaist true wstawia false (IMG:style_emoticons/default/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.

Ten post edytował Dapi 9.09.2010, 19:10:01
Go to the top of the page
+Quote Post
MadMark
post
Post #4





Grupa: Zarejestrowani
Postów: 105
Pomógł: 3
Dołączył: 12.07.2010

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

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 (IMG:style_emoticons/default/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? (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
kamil4u
post
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/tongue.gif)
Kod
onclick="(var el = document.getElementById('idcheckboxa')).checked = !el.checked;"

Jak masz jakieś pytania to pytaj

Ten post edytował kamil4u 9.09.2010, 19:21:46
Go to the top of the page
+Quote Post
MadMark
post
Post #6





Grupa: Zarejestrowani
Postów: 105
Pomógł: 3
Dołączył: 12.07.2010

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

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 ?
Go to the top of the page
+Quote Post
kamil4u
post
Post #7





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

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
Go to the top of the page
+Quote Post
MadMark
post
Post #8





Grupa: Zarejestrowani
Postów: 105
Pomógł: 3
Dołączył: 12.07.2010

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

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.

Ten post edytował MadMark 9.09.2010, 19:54:52
Go to the top of the page
+Quote Post
kamil4u
post
Post #9





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

To jednak musisz to zrobić po mojemu (IMG:style_emoticons/default/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>
Go to the top of the page
+Quote Post
MadMark
post
Post #10





Grupa: Zarejestrowani
Postów: 105
Pomógł: 3
Dołączył: 12.07.2010

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

Dzięki bardzo, klient usatysfakcjonowany (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.08.2025 - 14:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn