根据asp:RadioButton选择显示/隐藏Div

时间:2015-08-22 20:21:25

标签: javascript jquery asp.net

我有一个asp:textbox应用程序,在一个页面上我有一个带有2个单选按钮的问题,我希望在选择其中一个选项时显示JQuery但我无法弄清楚如何使用<div class="form-group"> <asp:Label ID="Step03PgSelectionLabel" class="col-sm-4 control-label" runat="server" Text="How many pages would you like us to look at *" style="padding-top: 0px"></asp:Label> <div class="col-sm-3"> <asp:Label runat="server" class="radio-inline" style="padding-top: 0px"> <asp:RadioButton runat="server" id="Step03AllPgsRadioButton" value="All" GroupName="Step03PgSelection"/>All </asp:Label> <asp:Label runat="server" class="radio-inline" style="padding-top: 0px"> <asp:RadioButton runat="server" id="Step03SelectionPgsRadioButton" name="selection" value="Selection" GroupName="Step03PgSelection"/>Selection </asp:Label> </div> <div class="col-sm-offset-4 col-sm-8"> <asp:CustomValidator id="CustomStep03PgSelection" runat="server" Display="Dynamic" ForeColor="Red" ErrorMessage="Please select if you would like us to look at all you pages or specific pages." ClientValidationFunction="Step03PgSelection_ClientValidate" OnServerValidate="Step03PgSelection_ServerValidate" /> </div> </div> <div class="form-group" id="hiddenSpecificPages"> <asp:Label ID="Step03SpecificPagesLabel" class="col-sm-4 control-label" runat="server" Text="Please specify all specific page URL's *" AssociatedControlID="Step03SpecificPagesField"></asp:Label> <div class="col-sm-4"> <asp:TextBox ID="Step03SpecificPagesField" runat="server" class="form-control" TextMode="MultiLine" Rows="10"></asp:TextBox> </div> <div class="col-sm-offset-4 col-sm-8"> <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep03SpecificErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03SpecificPagesField" ErrorMessage="Please list all the page URL's you would like us to look at." /> </div> </div>

来完成

HTML

JQuery

我尝试了以下$(function () { $("input[name='selection']").click(function () { if ($("#MainContent_Step03SelectionPgsRadioButton").is(":checked")) { $("#hiddenSpecificPages").show(); } else { $("#hiddenSpecificPages").hide(); } }); }); $(document).ready(function () { if ($('#MainContent_Step03SelectionPgsRadioButton').checked = true) { $('hiddenSpecificPages').show(); } else { $('hiddenSpecificPages').hide(); } }); $(document).ready(function () { $('#MainContent_Step03SelectionPgsRadioButton').change(function () { $('hiddenSpecificPages').show(); }); }); $(function () { if ($("#MainContent_Step03SelectionPgsRadioButton").val() == "Selection") { $("#hiddenSpecificPages").show(); } else { $("#hiddenSpecificPages").hide(); } }); ,但我无法使其正常工作

Timer2.Enabled = True And Label2.Text = "0"

2 个答案:

答案 0 :(得分:0)

对RadioButton使用ClientIDMode =“Static”以确保ID不会更改。

答案 1 :(得分:0)

hidden添加到顶级div并在以下JQuery修改了我的姓名

<强> HTML

<div class="form-group" id="hiddenSpecificPages" hidden>
    <asp:Label ID="Step03SpecificPagesLabel" class="col-sm-4 control-label" runat="server" Text="Please specify all specific page URL's *" AssociatedControlID="Step03SpecificPagesField"></asp:Label>
    <div class="col-sm-4">
        <asp:TextBox ID="Step03SpecificPagesField" runat="server" class="form-control" TextMode="MultiLine" Rows="10"></asp:TextBox>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep03SpecificErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03SpecificPagesField" ErrorMessage="Please list all the page URL's you would like us to look at." />
    </div>
</div>

<强> JQuery的

$(function () {
    $("input[name='ctl00$MainContent$Step03PgSelection']").click(function () {
        if ($("#MainContent_Step03SelectionPgsRadioButton").is(":checked")) {
            $("#hiddenSpecificPages").show();
        } else {
            $("#hiddenSpecificPages").hide();
        }
    });
});