當我點擊另一個單選按鈕時，如何從單選按鈕選擇中清除內容？

Question

所以我在這裏問的是，當我點擊一個單選按鈕時，我能夠從我選擇的每個單選按鈕中看到正確的內容，並且能夠正常工作。我遇到的問題是當我選擇另一個單選按鈕時背景顏色沒有清除，當我選擇另一個單選按鈕時，如果我還選擇另一個單選按鈕，我的隱藏輸入域將不會清除。我希望我寫的不是混淆。

<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

背景顏色沒有被重置，因爲您沒有重置它。

只需添加這重置回它不管它是什麼：

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

Answer 2

這可能是你想要的東西 - 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"); 
    } 
});