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.