当我单击另一个单选按钮时，如何清除单选按钮选择中的内容？

Question

So what I'm asking here is that when I click on a radio button I'am able to see the correct content from each radio button that I select and that works correctly. the problem that I'am having is that the background color is not clearing when I select another radio button, also when I choose the other radio button my hidden input field will not clear if I also select another radio button. I hope what I wrote is not confusing.

<script type="text/javascript" charset="utf-8">

  function rb1(){
    $("#img1").attr("src","<%= site_url('images/anonymous.png') %>");
    $("h3#amount").text("$what can $10 do?");
    $("p#amountDescription").text("this is for $10");
    $("#radio1").css("background-color","#73a1d0");
  };

  function rb2(){
    $("#img1").attr("src","<%= site_url('images/bg.png') %>");
    $("h3#amount").text("radio 2");
    $("p#amountDescription").text("this is for $20");
    $("#radio2").css("background-color","#73a1d0");
  };

  function rb3(){
    $("#img1").attr("src","<%= site_url('images/bg.png') %>");
    $("h3#amount").text("radio 3");
    $("p#amountDescription").attr("this is for $20");
    $("#radio3").css("background-color","#73a1d0");
  };

  function rb4(){
    $("#img1").attr("src","<%= site_url('images/bg.png') %>");
    $("h3#amount").text("radio 4");
    $("p#amountDescription").text("this is for $20");
    $("#radio4").css("background-color","#73a1d0");
  };

  function rb5(){
    $("#img1").attr("src","<%= site_url('images/bg.png') %>");
    $("h3#amount").text("radio 5");
    $("p#amountDescription").text("this is for $20");
    $("#radio5").css("background-color","#73a1d0");
  };

  function other(){
    $("#img1").attr("src","<%= site_url('images/bg.png') %>");
    $("#otherInput").show("");
    $("p#amountDescription").text("Other Amount");
    $("#other").css("background-color","#73a1d0");
  };
</script>


  <span id="radio1" class="selection">$10<br/>
    <input onClick="rb1()" type="radio"  name="group_name" CHEKCED value="rb1" />

    <div id="box1">
    <img src="images/" id="img1">
    <h3 id="amount"></h3>
    <p id="otherInput" style="display:none;">$<input class="oInput" type="text" name="" value=""></p>
    <p id="amountDescription"></p>      
    </div>


    </span>
     <span id="radio2" class="selection">$20<br/>
    <input onClick="rb2()"  type="radio" name="group_name" value="rb2"  />
    </span>
     <span id="radio3" class="selection">$30<br/>
    <input onClick="rb3()" type="radio" name="group_name" value="rb3" />
    </span> 
     <span id="radio4" class="selection">$40<br/>
    <input onClick="rb4()" type="radio" name="group_name" value="rb4" />
    </span>
     <span id="radio5" class="selection">$50<br/>
    <input onClick="rb5()" type="radio" name="group_name" value="rb5"/>
    </span>
     <span id="other" class="selection">Other<br/>
    <input onClick="other()" type="radio" name="group_name" value="other" />
    </span> 

Answer 1

The background color isn't resetting because you're not resetting it.

Simply add this to reset it back to whatever it was:

$(".selection").css("background-color","white");

Answer 2

This might be the stuff you want - http://jsfiddle.net/YU7uA/2/

<span id="radio1" class="selection">$10<br/>
    <input type="radio"  name="group_name" checked value="rb1" />

    <div id="box1">
    <img src="http://placehold.it/30/30" id="img1">
    <h3 id="amount"></h3>
    <p id="otherInput" style="display:none;">$<input class="oInput" type="text" name="" value=""></p>
    <p id="amountDescription"></p>      
    </div>

</span>

<span id="radio2" class="selection">$20<br/>
    <input type="radio" name="group_name" value="rb2"  />
</span>

<span id="radio3" class="selection">$30<br/>
    <input type="radio" name="group_name" value="rb3" />
</span> 

<span id="radio4" class="selection">$40<br/>
    <input type="radio" name="group_name" id='rb4' value="rb4" />
</span>

<span id="radio5" class="selection">$50<br/>
    <input type="radio" name="group_name" value="rb5"/>
</span>

<span id="other" class="selection">Other<br/>
    <input type="radio" name="group_name" value="other" />
</span> 



$('input:radio').click(function() {
    // clean bg
    $('span').each(function() {
        $(this).css('background-color', '#fff');
    });

    var myValue = ($(this).attr("value")).substr(($(this).attr("value")).length - 1);

    if (myValue === 'r') {
        $('#otherInput').css('display', 'block');
        $("h3#amount").text("");
        $("p#amountDescription").text("");
        $("#other").css("background-color","#73a1d0")
    } else {
        $("#img1").attr("src", "http://placehold.it/30/30");
        $("h3#amount").text("what can $" + myValue + "0 do?");
        $("p#amountDescription").text("this is for $" + myValue + "0");
        $("#radio" + myValue).css("background-color","#73a1d0");
    }
});