login  Naam:   Wachtwoord: 
Registreer je!
 Forum

kleur tekst veranderen indien checkbox is aangevinkt

Offline marcor - 31/01/2007 08:47 (laatste wijziging 31/01/2007 08:48)
Avatar van marcorNieuw lid Ik wil graag een bepaald deel van m'n tekst rood hebben
en dat zou groen moeten worden als er een checkbox is
aangevinkt en vice versa. Kan iemand me vertellen hoe ik dit kan doen?

6 antwoorden

Gesponsorde links
Offline Skelton - 31/01/2007 09:36
Avatar van Skelton Nieuw lid Dit kan je doen dmv van CSS en javascript.

Kijken met javascript of je checkbox is aangevinkt of niet. En dan zo door css de kleur veranderen.

aangevinkt dan:
<span class="rood">stukje tekst</span>
niet aangevinkt dan:
<span class="groen">stukje tekst</span>
Offline marcor - 31/01/2007 09:48 (laatste wijziging 31/01/2007 10:09)
Avatar van marcor Nieuw lid zoiets dacht ik al wel maar vind ik best lastig omdat ik heel weinig ervaring heb met javascript. ik zoek nog wel even verder of ik er nog aan uit kan komen

-edit-

ik heb nu de volgende regel:

if(form.checkbox.checked==true) maar hoe gaat het verder? hoe geef ik het stukje tekst aan dat groen of rood moet zijn, want die staat natuurlijk niet in de header. moet ik dan met variabelen werken?
Offline Thomas - 31/01/2007 11:03
Avatar van Thomas Moderator Zoiets?
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. .on
  3. {
  4.   color: #0c0;
  5. }
  6.  
  7. .off
  8. {
  9.   color: #c00;
  10. }
  11. </style>
  12. <script type="text/javascript">
  13. function change_class(id, active_class, inactive_class, condition)
  14. {
  15.   var id = document.getElementById(id);
  16.   id.className = (condition) ? active_class : inactive_class;
  17. }
  18. </script>
  19. <span id="tekst" class="off">
  20. <input type="checkbox" onclick="change_class('tekst', 'on', 'off', this.checked)" /> klik!
  21. </span>
Offline marcor - 31/01/2007 11:07 (laatste wijziging 01/02/2007 12:41)
Avatar van marcor Nieuw lid geen idee, ik zal er eens mee aan de slag gaan! dankje


-edit-

Ik kom er niet helemaal aan uit, m'n code is nu zo:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head>
  2. <SCRIPT language="javascript" type="text/javascript">
  3. function change_class(id, active_class, inactive_class, condition)
  4. {
  5.   var id = document.getElementById(id);
  6.   id.className = (condition) ? active_class : inactive_class;
  7. }
  8. </SCRIPT>
  9. </head>
  10.  
  11. <style type="text/css">
  12. .on
  13. {
  14.   color: #009900;
  15. }
  16.  
  17. .off
  18. {
  19.   color: #FF0000;
  20. }
  21. </style>
  22.  
  23. td height="39"><span class="off"><b>Executive board agree</b></span></td>
  24.       <td>
  25.         <input  name="checkbox" type="checkbox" value="checkbox" onclick="change_class('text', 'on', 'off', this.checked)" />
  26.        <span id="text" class="off"><strong>Agree</strong></span></td>


Alleen op deze manier werkt het nog niet, ik heb wel meer verschillende soort css styles die dan beginnen met <style type="text/css"> maar dat maakt niks uit toch?
Offline Thomas - 31/01/2007 12:40 (laatste wijziging 31/01/2007 12:45)
Avatar van Thomas Moderator Elk onderdeel dat je anders wilt kleuren moet je een uniek id geven, want wat je in feite doet is het aanpassen van een stijl-klasse van een tag met een bepaald id met behulp van JavaScript.

Dus of je moet meerdere aanroepen hebben van change_class, waarbij je elke keer aangeeft welk onderdeel (met welk uniek id) je wilt aanpassen, of je zet een id in een bovenliggende tag - gezien je van tabellen gebruik maakt zou je kunnen proberen de tabelrij een id te geven. Dan wordt de kleur van alle inhoud van die tabel-rij aangepast... MITS er op "lager niveau" -een tabelcel <td>- geen kleur gedefinieerd is in een stylesheet, want deze laatste kleur zal dan waarschijnlijk de gewijzigde kleur weer "overrulen", of je moet hier aparte stijlregels voor schrijven...

EDIT: zo dus
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2. .on
  3. {
  4. 	color: #0c0;
  5. }
  6.  
  7. .off
  8. {
  9. 	color: #c00;
  10. }
  11.  
  12. /*
  13. hardcoded stijlopmaak gooit roet in het eten
  14. tabelcellen worden blauw no matter what
  15. */
  16. td
  17. {
  18. 	color: #00c;
  19. }
  20.  
  21. /*
  22. het volgende zorgt er weer voor dat dit wel goed gaat
  23. de oorspronkelijke .on en .off die hierboven staan kunnen weg
  24. */
  25. .on td
  26. {
  27. 	color: #0c0;
  28. }
  29.  
  30. .off td
  31. {
  32. 	color: #c00;
  33. }
  34. </style>
  35. <script type="text/javascript">
  36. function change_class(id, active_class, inactive_class, condition)
  37. {
  38.   var id = document.getElementById(id);
  39.   id.className = (condition) ? active_class : inactive_class;
  40. }
  41. </script>
  42. <table border="1">
  43. <tr id="tekst" class="off">
  44. <td>bliep</td>
  45. <td><input type="checkbox" onclick="change_class('tekst', 'on', 'off', this.checked)" /> klik!</td>
  46. </tr>
  47. </table>
Offline marcor - 31/01/2007 13:07 (laatste wijziging 01/02/2007 12:40)
Avatar van marcor Nieuw lid oke, bedankt

-edit-

Als ik het goed begrijp bedoel je dit:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <head> 
  2. </SCRIPT language="javascript"type="text/javascript"> 
  3. function change_class(id, active_class, inactive_class, condition) 
  4. { 
  5.   var id = document.getElementById(id); 
  6.   id.className = (condition) ? active_class : inactive_class; 
  7. } 
  8.  
  9. </SCRIPT> 
  10. </head> 
  11.  
  12. <style type="text/css"> 
  13. .on td 
  14. { 
  15.   color: #009900; 
  16. } 
  17.  
  18. .off td 
  19. { 
  20.   color: #FF0000; 
  21. } 
  22. </style> 
  23.  
  24. <tr id="text" class="off"> 
  25.       <td height="39"><strong>Executive board agree</strong></td> 
  26.       <td> 
  27.         <input  name="checkbox" type="checkbox" class="on" onClick="change_class('text', 'on', 'off', this.checked)" value="checkbox"> 
  28.       <strong>Agree</strong></td> 
  29.       <td></td> 
  30.     </tr>


alleen hiermee werkt het ook nog niet

-edit-

Niemand die me hiermee kan helpen?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s