Radio btn chnage background to the latest btn clicked

Question

dany12 13 Light Poster

12 Years Ago

Hello I want to chnage the background to the latest radio btn clicked like in the atached image

I have made somecode but this is not doing the job I have strated like this jQuery(':radio:last:checked').lengthI thought that by this way I will get one result and I was right then I wrote it like this

jQuery(document).ready(function(){

    jQuery(':radio:checked').click(function(){



        if(jQuery(this).is(':last')){

        jQuery(this).closest('td').css('background','blue');

        }

        else if(jQuery(this).is(':not(':last')')){

        jQuery(this).closest('td').css('background','none');


        }

    });



});

Can somenody help me?
Thank you in advance

javascript

3 Contributors
7 Replies
447 Views
5 Days Discussion Span
Latest Post 12 Years Ago Latest Post by dany12

rajengg 0 Newbie Poster

12 Years Ago

It is very easy to Change background color on radio select.
Please check below script

<script>
$("input").click(function() {

$("div").css('background','white');
var divid=$(":checked").val();
$('#'+divid).css('background',blue);
});
</script>

Source:http://rajeshstutorials.blogspot.com/2012/06/jquery-change-background-color-based-on.html

rajengg 0 Newbie Poster

12 Years Ago

Hello,

you can use td instead of DIv tag.please check following e.g.

just copy below code in html file.

<html>

<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<table>
<form>
<tr>
<td id=1>
   <input type="radio" name="1" value="1" class="hi">
 </td>
 </tr>
 <tr>
 <td id="2">
    <input type="radio" name="1" value="2" class="mid">
 </td>
 <td id="3">
    <input type="radio" name="1" value="3" class="mid">
 </td>

    </tr>
</form>
<script>
$("input").click(function() {

$("td").css('background','white');
var td_id=$(":checked").val();
$('#'+td_id).css('background','blue');
});
</script>
</body>
</html>

Edited 12 Years Ago by rajengg

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dany12 13 Light Poster · Answer 1 · 2012-06-16T10:59:21+00:00

Have you seen the atachement before you have submited your answer this is not what I am after if you look closely at the picture that I submitted you will see that this is a more complex problem and I highlight the td not a div

dany12 13 Light Poster · Answer 2 · 2012-06-16T11:45:06+00:00

Not a solution to the problem look at the picture and you will see that only the last clicked button is changing the color and teh rest remain selected without changing the color try my code out that is the closest thing I got to solve this

dany12 13 Light Poster · Answer 3 · 2012-06-17T15:03:35+00:00

Can someone please help me understand where have I gone wrong?
Thank you

JJenZz 36 Newbie Poster · Answer 4 · 2012-06-21T17:06:07+00:00

I'm struggling to understand what you are trying to do... which of the following?

The td background should only change colour when the last radio button out of all the radio buttons in the table is clicked.
The background colour for the radio buttons in the second column should change when they're clicked.

I have added examples of both here: http://jsfiddle.net/3NE8j/2/

Not sure if I've interpreted what you were trying to say correctly though.

dany12 13 Light Poster · Answer 5 · 2012-06-21T19:07:31+00:00

Ok this is the idea when you click a radio button you get a blue bg when you click a new radio btn you get a bg to the new button and the old one gets the default bg but remains selected
Hope you understand now