[英]How can I clear content from a radio button selection when I click on another radio button?
因此,我要問的是,當我單擊一個單選按鈕時,我能夠從我選擇的每個單選按鈕中看到正確的內容,並且它們可以正常工作。 我遇到的問題是,當我選擇另一個單選按鈕時,背景顏色無法清除,而且當我選擇另一個單選按鈕時,如果我也選擇了另一個單選按鈕,則隱藏的輸入字段將無法清除。 我希望我寫的東西不會混淆。
<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>
未重置背景顏色,因為您未重置它。
只需添加此命令即可將其重置為原來的狀態:
$(".selection").css("background-color","white");
這可能是您想要的東西-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");
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.