[英]Call a javascript function on RadioButton click
I want the customer to be able to either buy phone line or credit. 我希望客户能够购买电话线或信用卡。 At first, both
div
s are hidden, and I want the related div
to unhide (or show
) when the customer chooses one purchase option. 首先,两个
div
都是隐藏的,我希望相关的div
在客户选择一个购买选项时取消隐藏(或show
)。
Here is my code, but nothing happens when I check one of the two radio buttons. 这是我的代码,但是当我检查两个单选按钮中的一个时没有任何反应。 I don't want the page to postback, so I cannot set
AutoPostBack="true"
我不希望页面回发,所以我无法设置
AutoPostBack="true"
Any help on what I am doing wrong is really appreciated =) 对我做错了什么的帮助真的很感激=)
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#radLinePanel").click(chkPanelChanged);
$("#radCreditPanel").click(chkPanelChanged);
chkPanelChanged();
});
function chkPanelChanged() {
if ($("#radLinePanel").is(':checked')) {
$("#divLine").show("medium");
}
else {
$("#divLine").hide("medium");
}
if ($("#radCreditPanel").is(':checked')) {
$("#divCredit").show("medium");
}
else {
$("#divCredit").hide("medium");
}
}
</script>
<div class="GreenPanel">
<div class="GreenPanelHeader">
<asp:RadioButton ID="radLinePanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" ClientIDMode="Static"/>
Buy New Phone Line
</div>
<div id="divLine" class="GreenPanelContent" runat="server">
Blablabla
</div>
<div class="GreenPanelHeader">
<asp:RadioButton ID="radCreditPanel" runat="server" GroupName="ItemToBuy" Checked="false" Text="" AutoPostBack="false"/>
Buy credit
</div>
<div id="divCredit" class="GreenPanelContent" runat="server">
Blablabla
</div>
</div>
Your syntax is wrong. 你的语法错了。 You can try this:
你可以试试这个:
$(document).ready(function () {
$("#radLinePanel").click(function(){
chkPanelChanged();
});
$("#radCreditPanel").click(function(){
chkPanelChanged();
});
});
Or 要么
$(document).ready(function () {
$("input[type='radio']").click(function(){
chkPanelChanged();
});
});
The chkPanelChanged also can be like this: chkPanelChanged也可以是这样的:
$(document).ready(function () {
$("input[type='radio']").on("change", function(){
chkPanelChanged(this);
});
});
function chkPanelChanged(obj) {
if (obj.id == "radLinePanel") {
$("#divLine").show("medium");
$("#divCredit").hide("medium");
}
else if (obj.id == "radCreditPanel")
{
$("#divLine").hide("medium");
$("#divCredit").show("medium");
}
}
If you trying to use grouped radio buttons, Then consider this: 如果您尝试使用分组单选按钮,请考虑以下情况:
HTML HTML
<div id="radio">
<input type="radio" id="radio1" name="radio" value="1" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" value="2" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" value="3" /><label for="radio3">Choice 3</label>
</div>
Jquery jQuery的
$("input[name='radio']").on("change", function () {
alert(this.value);
});
$(document).ready(function () {
$("#radLinePanel").click(chkPanelChanged);
$("#radCreditPanel").click(chkPanelChanged);
chkPanelChanged();
});
should be change as 应该改变为
$(document).ready(function () {
$("#radLinePanel").click(function () {
chkPanelChanged();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.