单选按钮 IF 条件未在 asp.net 中的 Javascript 中执行

Question

这是我的代码：

asp.net:

            <table>
                <tr>
                    <td class="td1" colspan="2" style="width:100%;text-align:center;border-top-left-radius:10px;border-top-right-radius:10px">Make Payment</td>
                </tr>
                <tr>
                    <td class="td1" title="Payment Mode">Payment Mode:</td>
                    <td class="td2">
                        <asp:RadioButtonList ID="rblpaymentmode" runat="server" CssClass="lbidname" RepeatDirection="Horizontal" ToolTip="Select Payment Mode" OnSelectedIndexChanged="rblpaymentmode_SelectedIndexChanged" AutoPostBack="True" CausesValidation="True">
                            <asp:ListItem>Cheque</asp:ListItem>
                            <asp:ListItem>Cash</asp:ListItem>
                        </asp:RadioButtonList>
                    </td>
                </tr>
                <tr>
                    <td class="td1" title="Member Name">Member:</td>
                    <td class="td2">
                        <asp:DropDownList ID="ddlmember" runat="server" CssClass="ddl" ToolTip="Select Member">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td class="td1" title="Particular Type">Particular Type:<br />
                        <br />
                        <asp:Label ID="lbenterdetails" runat="server" Text="Enter Details:" ToolTip="Enter Details:" Visible="False"></asp:Label>
                    </td>
                    <td class="td2">
                        <asp:RadioButtonList ID="rblparticulartype" runat="server" CssClass="lbidname" RepeatDirection="Horizontal" OnSelectedIndexChanged="rblparticulartype_SelectedIndexChanged" ToolTip="Select Particular Type" AutoPostBack="True" CausesValidation="True">
                            <asp:ListItem Selected="True">Yearly Lawaazam</asp:ListItem>
                            <asp:ListItem>Other</asp:ListItem>
                        </asp:RadioButtonList>
                        <asp:TextBox ID="txtotherparticulartype" runat="server" CssClass="textbox" ToolTip="Enter Details" Width="90%" Visible="False"></asp:TextBox>
                    </td>
                </tr>                    
                <tr>
                    <td class="td1" title="Cheque Date">Cheque Date:</td>
                    <td class="td2">
                        <asp:TextBox ID="txtchequedate" runat="server" CssClass="textbox" Width="90%" ToolTip="Select Cheque Date"></asp:TextBox>
                        <asp:CalendarExtender runat="server" ID="cetxtchequedate" CssClass="cal_Theme1" PopupPosition="Right" TargetControlID="txtchequedate" Format="yyyy-MM-dd"></asp:CalendarExtender>
                    </td>
                </tr>
                <tr>
                    <td class="td1" title="Cheque No.">Cheque No.:</td>
                    <td class="td2">
                        <asp:TextBox ID="txtchequeno" runat="server" CssClass="textbox" Width="90%" ToolTip="Enter Cheque No."></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="td1" title="Bank Name">Bank Name:</td>
                    <td class="td2">
                        <asp:TextBox ID="txtbankname" runat="server" CssClass="textbox" Width="90%" ToolTip="Enter Bank Name"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="td1" title="Branch Name">Branch Name:</td>
                    <td class="td2">
                        <asp:TextBox ID="txtbranchname" runat="server" CssClass="textbox" Width="90%" ToolTip="Enter Branch Name"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="td1">
                        <asp:Label ID="lbpaymentdate" runat="server"></asp:Label>
                    </td>
                    <td class="td2">
                        <asp:TextBox ID="txtpaymentdate" runat="server" CssClass="textbox" Width="90%" ToolTip="Enter Clearance Date"></asp:TextBox>
                        <asp:CalendarExtender runat="server" ID="cetxtclearancedate" CssClass="cal_Theme1" PopupPosition="Right" TargetControlID="txtpaymentdate" Format="yyyy-MM-dd"></asp:CalendarExtender>
                    </td>
                </tr>
                <tr>
                    <td class="td1" title="Amount">Amount:</td>
                    <td class="td2">
                        <asp:TextBox ID="txtamount" runat="server" CssClass="textbox" Width="90%" ToolTip="Enter Amount"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="td2" colspan="2" style="width:100%;text-align:center;background-color:#FFF6C1">
                        <asp:Panel ID="pnlchequeimage" runat="server" Visible="false">
                            <p style="padding-top:5px">Upload a cheque image to <a href="http://www.tinypic.com" target="_blank">TinyPic.com</a> &amp; paste the image url in the textbox below.</p> 
                            <asp:TextBox ID="txtchequeimage" CssClass="textbox" Width="60%" runat="server"></asp:TextBox>
                            <br />
                            <br />
                        </asp:Panel>
                    </td>                        
                </tr>
                <tr>
                    <td class="td1" colspan="2" style="width:100%;text-align:center;padding-bottom:10px;padding-top:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px">
                        <asp:Button ID="btnmakepayment" runat="server" CssClass="button" Text="Make Payment" OnClientClick="return validate()" ToolTip="Make Payment" Width="120px" />
                    </td>                        
                </tr>
            </table>

Javascript：

<script type="text/javascript">    
    function validate() {
 if (document.getElementById("<%=rblparticulartype.ClientID%>").value == "Other") {
            if (document.getElementById("<%=txtotherparticulartype.ClientID%>").value=="") {
                alert("Please enter details");
                document.getElementById("<%=txtotherparticulartype.ClientID%>").focus();
                return false;
         }              
    }
}
</script>
<br/>

我想检查一下，如果选择了单选按钮“其他”，那么提交时文本框“txtotherparticulartype”不为空

但是如果条件不进入Radiobutton的循环

请帮忙！！！

Answer 1

一些更正和建议：

首先您将visible 设置为false，txtotherparticulartype 将其更改为true

第二个你有一个radionbutton 列表，所以它的孩子会像这样得到id：

rblparticulartype_0指第一个列表项的id；

rblparticulartype_1指的是第二个的id 所以你可以试试这个来获得检查的价值（不自己测试）：

var value = document.getElemenById("rblparticulartype_0");

另一种方法是，您可以使用getElementsByName 访问每个单选按钮ListItem，并使用如下索引：

var check = document.getElementsByName('rblparticulartype')[1].checked;

顺便说一句，你的代码应该是这样的：

<script type="text/javascript">
    function validate() { 
        var check = document.getElementsByName('rblparticulartype')[1].checked;
            if (check == true) {
                var value = document.getElementById("<%=txtotherparticulartype.ClientID %>").value;
                if (value == "") {
                    alert("Please enter details");
                    document.getElementById("<%=txtotherparticulartype.ClientID%>").focus();
                    return false;
                }
            }
        } 
</script>

或者最后应该是这样的：

 <script type="text/javascript">
    function validate() {
        var radioButtons = document.getElementsByName("rblparticulartype"); 
        for (var x = 0; x < radioButtons.length; x++) {
            if (radioButtons[x].checked && radioButtons[x].value == "Other") {
                var value = document.getElementById("<%=txtotherparticulartype.ClientID %>").value;
                if (value == "") {
                    alert("Please enter details");
                    document.getElementById("<%=txtotherparticulartype.ClientID%>").focus();
                    return false;
                }
            }
        }
    }
</script>

我已经测试了以上两个代码，它们都可以正常工作。

希望会有所帮助。