javascript - 单击 RadioButton 调用 javascript 函数

Question

我希望客户能够购买电话线或信用卡。起初，两个 div 都是隐藏的，我希望相关的 div 在客户选择一个购买选项时取消隐藏(或 show)。

这是我的代码，但是当我选中两个单选按钮之一时没有任何反应。我不希望页面回发，所以无法设置 AutoPostBack="true"

非常感谢对我做错的任何帮助 =)

<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>

Answer 1

你的语法错误。你可以试试这个:

$(document).ready(function () {
   $("#radLinePanel").click(function(){
      chkPanelChanged();
   });

   $("#radCreditPanel").click(function(){
      chkPanelChanged();
   });
});

或者

$(document).ready(function () {

   $("input[type='radio']").click(function(){
      chkPanelChanged();
   });

});

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");
    }
}

如果您尝试使用分组单选按钮，请考虑以下事项:

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

$("input[name='radio']").on("change", function () {
   alert(this.value);
});