?
Solved

jquery checkboxes

Posted on 2012-08-10
8
Medium Priority
?
563 Views
Last Modified: 2012-08-16
Can someone please give me some complete working examples of a jquery function changing the colour of a row when a checkbox is checked. The checkbox will be associated with the row - ie I have a number of rows each with an associated checkbox

Thanks
0
Comment
Question by:doctorbill
8 Comments
 
LVL 8

Expert Comment

by:soupBoy
ID: 38281308
Here is a very basic example I created on jsFiddle: Adding classes to parent tr with JQuery
0
 
LVL 8

Expert Comment

by:mrh14852
ID: 38281359
The only issue with that is if the table is very large you could have 100s of click events generated which can make things very slow.

In this fiddle it only creates 1 event listener for the table using jquery .on().

http://jsfiddle.net/LFmSd/
0
 

Author Comment

by:doctorbill
ID: 38281466
sorry but nothing happens on my page, I use a css file and have substututed in a class from the file but no colour change
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 8

Expert Comment

by:soupBoy
ID: 38281479
You will need to post your code....
0
 

Author Comment

by:doctorbill
ID: 38281585
I have managed to get a test page working with css using the scripts posted above. I will need to look at my main page in more detail
0
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 2000 total points
ID: 38283353
I might not load the jQuery library for something this trivial.  Here are some examples showing the essential moving parts in JavaScript.
<?php // RAY_color_change.php ?>

DEMONSTRATE HOW TO CHANGE COLORS BY REPLACING A CSS CLASS NAME

<style type="text/css">
.red { background-color: #FF0000;}
.grn { background-color: #00FF00;}
.blu { background-color: #0000FF;}
.clr { background-color: #FFFFFF;}
</style>

<div id="foo" class="clr">This is the target</div>

<br/>TRY A RADIO BUTTON TO PERMANENTLY CHANGE THE COLOR
<br/><input type="radio" name="r" onClick="document.getElementById('foo').className='red'" />RED
<br/><input type="radio" name="r" onClick="document.getElementById('foo').className='grn'" />GREEN
<br/><input type="radio" name="r" onClick="document.getElementById('foo').className='blu'" />BLUE
<br/><input type="radio" name="r" onClick="document.getElementById('foo').className='clr'" />CLEAR
<br/>

<br/>TRY A MOUSEOVER TO PERMANENTLY CHANGE THE COLOR
<br/><span onMouseOver="document.getElementById('foo').className='red'" />RED   </span>
<br/><span onMouseOver="document.getElementById('foo').className='grn'" />GREEN </span>
<br/><span onMouseOver="document.getElementById('foo').className='blu'" />BLUE  </span>
<br/><span onMouseOver="document.getElementById('foo').className='clr'" />CLEAR </span>
<br/>

<br/>TRY A MOUSEOVER+MOUSEOUT TO TOGGLE THE COLOR
<br/><span onMouseOver="document.getElementById('foo').className='red'" onMouseOut="document.getElementById('foo').className='clr'" />RED   </span>
<br/><span onMouseOver="document.getElementById('foo').className='grn'" onMouseOut="document.getElementById('foo').className='clr'" />GREEN </span>
<br/><span onMouseOver="document.getElementById('foo').className='blu'" onMouseOut="document.getElementById('foo').className='clr'" />BLUE  </span>
<br/>

<br/>TRY A MOUSEOVER TO PERMANENTLY CHANGE THE CONTENT
<br/><span onMouseOver="document.getElementById('foo').innerHTML='The target is <i>red</i>';document.getElementById('foo').className='red'" />RED   </span>
<br/><span onMouseOver="document.getElementById('foo').innerHTML='The target is <i>grn</i>';document.getElementById('foo').className='grn'" />GREEN </span>
<br/><span onMouseOver="document.getElementById('foo').innerHTML='The target is <i>blu</i>';document.getElementById('foo').className='blu'" />BLUE  </span>
<br/><span onMouseOver="document.getElementById('foo').innerHTML='The target is <i>clr</i>';document.getElementById('foo').className='clr'" />CLEAR </span>
<br/>

Open in new window

On my server at: http://www.laprbass.com/RAY_color_change.php
0
 

Author Comment

by:doctorbill
ID: 38283531
This is ok but I have checkboxes. When they are clicked and the page is refreshed, they keep their checked status because the value has been entered into a databse table.

So, for example,  if checkbox 1 is checked and the page is refreshed, the checkbox 1 is still checked

when the initial check is done the row needs to be coloured and the colour needs to be maintained when the page is refeshed becaues the checkbox is still checked
0
 

Author Closing Comment

by:doctorbill
ID: 38300049
Thanks for all contributions
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When we want to run, execute or repeat a statement multiple times, a loop is necessary. This article covers the two types of loops in Python: the while loop and the for loop.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question