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

Answer 2

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

应该改为

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

在单选按钮上调用javascript函数

2 个答案: