View Single Post
  #2   (View Single Post)  
Old 21st September 2009
owda owda is offline
New User
 
Join Date: Jun 2009
Posts: 1
Default

Your selector, $("input"), is selecting every input element on the page. So when you write:

Code:
$("input").parent("div").css("background", "url(images/div_bg.png)");
You are setting the parent div element of every radio button (including neighbor rows) to the black background, before setting the current one green.

Make the selector specific to each row (#row1, #row2), like this:

Code:
  $("#row1 input").click(function() {
                      $("#row1 input").parent("div").css("background", "url(images/div_bg.png)");
                      $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
                                            });

  $("#row2 input").click(function() {
                      $("#row2 input").parent("div").css("background", "url(images/div_bg.png)");
                      $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
                                            });
Being more specific will ensure that selecting a radio button from another row will not interfere with its neighbors.

It's good practice to be as specific as possible with jQuery selectors, otherwise they may step beyond their initial purpose and interfere with other elements. The selector $("input") would also select the other types of input element (textbox, checkbox, button etc.) if you were to add them later.

You can use the pseudo-selector :radio to only select radio buttons, e.g. $("input:radio"). There's more information and a full reference of these pseudo-selectors on the jQuery documentation website under Selectors.
Reply With Quote