color change on checkbox click?

  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

how can i change the backgroud
color of <tr> tag
whenever i click on the checkbox in it.

I mean as soon as the user checks
or unchecks the checkbox then the bgcolor of the corresponding <tr> tag should change.

...just as it is done in yahoo mail.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • CazpianXI
  • Proficient
  • Proficient
  • User avatar
  • Posts: 285

Post 3+ Months Ago

Try making the checkboxes images. Whenever a user clicks the image, just do an image rollover and set a hidden field to "true"

Hope this helps.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Maybe something like this:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function toggle(box,theId) {
    if(document.getElementById) {
        var cell = document.getElementById(theId);
        if(box.checked) {
            cell.className = "on";
        }
        else {
            cell.className = "off";
        }
    }
}
// -->
</script>
<style type="text/css">
<!--
.off {
background-color: #fff;
}
.on {
background-color: #ccc;
}
-->
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr><td class="off" id="cell1">
<input type="checkbox" onclick="toggle(this,'cell1')">Yada Yada Yada
</td></tr>
<tr><td class="off" id="cell2">
<input type="checkbox" onclick="toggle(this,'cell2')">Yada Yada Yada
</td></tr>
</table>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function toggle(box,theId) {
  7.     if(document.getElementById) {
  8.         var cell = document.getElementById(theId);
  9.         if(box.checked) {
  10.             cell.className = "on";
  11.         }
  12.         else {
  13.             cell.className = "off";
  14.         }
  15.     }
  16. }
  17. // -->
  18. </script>
  19. <style type="text/css">
  20. <!--
  21. .off {
  22. background-color: #fff;
  23. }
  24. .on {
  25. background-color: #ccc;
  26. }
  27. -->
  28. </style>
  29. </head>
  30. <body>
  31. <table border="1" cellpadding="5" cellspacing="0">
  32. <tr><td class="off" id="cell1">
  33. <input type="checkbox" onclick="toggle(this,'cell1')">Yada Yada Yada
  34. </td></tr>
  35. <tr><td class="off" id="cell2">
  36. <input type="checkbox" onclick="toggle(this,'cell2')">Yada Yada Yada
  37. </td></tr>
  38. </table>
  39. </body>
  40. </html>
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

Thank u very much the code worked....

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 140 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.