Jquery toggle background?

Question

Hello, here is my html

<div id="entry">
week
<span></span>
<p>DKK</p>
<input type="radio" name="red<% Response.Write(counter); %>" id="radio2" value="75" />
</div>

I have bunch of these div entry generated by while loop so I want to achieve this : WHEN input inside entry is clicked I want background image of entry div to change, but if I choose another radio in another entry div .. I'd like all previous changes( such as previous change of background) to go away and to change background of current div .. here is what I tried to do maybe you can help .. here is jquery below

$("input").click(function() {

             $(this).parent("div").toggle(function() {
             $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
             }, function() {
             $(this).parent("div").css("background", "url(images/div_bg.png)");

             });

Something is malfunctioning .. I mean code inst' working at all .. can anyone help me ? thank you

---

I've tried both this :

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });

AND

$("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
                     }
                     else {
                         $(this).parent("div").css("background", "url(images/div_bg.png)");
                     }
                 });
             });

for some reason its not working at all not changing the background , maybe it has to do something with the code above here is the complete script :

 <script type="text/javascript">

         $(document).ready(function() {

             $(".left_navigation a:last").toggleClass('bolder');


             $("input").each(function() {
                 var element_value = $(this).val();
                 $(this).prev("p").append(" " + element_value + ",-");
             });


             $("input").click(function() {
                 $("input").each(function() {
                     if (this.checked) {
                         $(this).parent("div").addClass("highlight");
                     }
                     else {
                         $(this).parent("div").removeClass("highlight");
                     }
                 });
             });




         });

</script>

Answer 1

you might need to use 'background-image' instead of just 'background' to set the images.

edit: thought I'd had trouble with the 'background' css property in jQuery before, but having just tested it on various browsers it seems I was either mistaken or it was fixed in jQuery versions since I worked with it.

Answer 2

The first immediate problem I see is that your jQuery is missing a }); at the end of it unless you just forgot to paste it there. That would stop it from doing anything other than throwing an error...

This is a simplified version of you've tried before. It might at least make debuging slightly easier.

<script type="text/javascript">
$(document).ready(function(){
    $("input").click( function() { 
         $("input").parent("div").removeClass("highlight");
         $(this).parent("div").addClass("highlight");
      });
  });
</script>

Although, I don't see anything obviously wrong about what you tried before which makes me wonder if $("input") is matching what you think it is. I would probably at least alert some things inside your click function for sanity checking. I've actually found a few times that my $(document).ready was firing before I thought it was i.e. before my inputs were ready because of my framework...

Answer 3

There are several problems:

• You are using Toggle and Toggle function is:

If they are shown, toggle makes them hidden (using the hide method). If they are hidden, toggle makes them shown (using the show method).

You should ask if the radio is checked

• You should call the each function, in order to change the other radio div values

• You should call the $(document).ready() function

Sample (Warning: Javascript is not my best weapon):

<script>
$(document).ready(function(){
    $("input").click( function() { 
         $("input").each(function() { 
             if (this.checked) {
                $(this).parent("div").css("background-color", "green") }
             else {
                $(this).parent("div").css("background-color", "red")}
          });
      });
  });
</script>

Note: I've used backgound-color for better testing, but your usage of background is good.