Question

我在asp.net 3.5中有一个表单，它有一个母版页和一个子页面（内容页面）。表格有几个问题，我使用asp.net复选框列表问题，因为可以选择多个选项，如果用户在其中一个选项上选择“其他”，则他们必须将数据输入到文本框字段中。

我做了以下客户端javascript来验证这一点但是，代码似乎没有检查选择了其他选项值，我认为它与html在页面上呈现的方式有关,,,

你能建议怎么做吗？

提前致谢。

渲染Javascript

//Here I am trying to get the text property of the label rendered for the texbox
// and set my validation arguments
<script language='javascript' type='text/javascript'>


    function checkOther2(oSrc, args) {
        {
            var elementRef =
document.getElementById('ctl00_Content_CheckBoxList1');
            var checkBoxArray = elementRef.getElementsByTagName('input');
            var checkedValues = '';

            for (var i = 0; i < checkBoxArray.length; i++) {
                var checkBoxRef = checkBoxArray[i];

                if (checkBoxRef.checked == true) {


                    // You can only get the Text property, which
    will be in an HTML label element.


                    var labelArray =
checkBoxRef.parentNode.getElementsByTagName('label');

                    if (labelArray.length > 0) {
                        if (checkedValues.length > 0)
                            checkedValues += ',';

                        checkedValues += labelArray[0].innerHTML.text;

                        if (checkedValues == 'Other') {
                            args.IsValid = !(args.Value == "")
                            // test 
                            alert("Hello");
                        }
                    }
                    else {
                        args.IsValid = true;
                    }

                }
            }
        }
    }




// HTML Rendered


           <tr>
               <td style="height: 20px">
                   &nbsp;</td>
           </tr>
           <tr>
               <td style="font-weight: 700">
                   2.- What did you like most about working here?<strong>
                   Check all that apply
                   <span id="ctl00_Content_CheckBoxListValidator1"
style="color:Red;display:none;"></span>
                   </strong><br /> </td>
           </tr>
           <tr>
               <td>


                   <table id="ctl00_Content_CheckBoxList1"
class="myradioButton" border="0">
            <tr>
                    <td><input id="ctl00_Content_CheckBoxList1_0" type="checkbox"
name="ctl00$Content$CheckBoxList1$0" /><label
for="ctl00_Content_CheckBoxList1_0">Staff</label></td>
            </tr><tr>
                    <td><input id="ctl00_Content_CheckBoxList1_1" type="checkbox"
name="ctl00$Content$CheckBoxList1$1" /><label
for="ctl00_Content_CheckBoxList1_1">Facility</label></td>
            </tr><tr>
                    <td><input id="ctl00_Content_CheckBoxList1_2" type="checkbox"
name="ctl00$Content$CheckBoxList1$2" /><label
for="ctl00_Content_CheckBoxList1_2">Pay</label></td>
            </tr><tr>
                    <td><input id="ctl00_Content_CheckBoxList1_3" type="checkbox"
name="ctl00$Content$CheckBoxList1$3" /><label
for="ctl00_Content_CheckBoxList1_3">Other</label></td>
            </tr>
    </table>
               </td>
           </tr>
           <tr>
               <td>
                   If other, please elaborate:<br />
                   <input name="ctl00$Content$txt2other"
type="text" id="ctl00_Content_txt2other" class="txtOther" />
                   &nbsp;<span id="ctl00_Content_CustomValidator3"
style="color:Red;font-weight:700;visibility:hidden;">Please enter a
comment in question #2.</span>
               </td>
           </tr>
           <tr>
               <td>
                   &nbsp;</td>
           </tr>



<tr>
               <td style="font-weight: 700">
                   2.- What did you like most about working here?<strong>
                   Check all that apply
                   <cc1:CheckBoxListValidator
ID="CheckBoxListValidator1" runat="server"
                       ControlToValidate="CheckBoxList1" Display="None"
                       ErrorMessage="Question 2 is
Required"></cc1:CheckBoxListValidator>
                   </strong><br /> </td>
           </tr>
           <tr>
               <td>






   ----------- Actual Markup on asp.net form


                   <asp:CheckBoxList ID="CheckBoxList1"
runat="server" CssClass="myradioButton">
                       <asp:ListItem Text="Staff"
Value="Staff">Staff</asp:ListItem>
                       <asp:ListItem Text="Facility"
Value="Facility">Facility</asp:ListItem>
                       <asp:ListItem Text="Pay"
Value="Pay">Pay</asp:ListItem>
                       <asp:ListItem Text="Other"
Value="Other">Other</asp:ListItem>
                   </asp:CheckBoxList>
               </td>
           </tr>
           <tr>
               <td>
                   If other, please elaborate:<br />
                   <asp:TextBox ID="txt2other" runat="server"
CssClass="txtOther"></asp:TextBox>
                   &nbsp;<asp:CustomValidator
ID="CustomValidator3" runat="server"
                       ClientValidationFunction="checkOther2"
ControlToValidate="txt2other"
                       ErrorMessage="Please enter a comment in
question #2." style="font-weight: 700"
                       ValidateEmptyText="True"></asp:CustomValidator>
               </td>
           </tr>

Answer 1

你的JS看起来相当复杂。尝试一种更简单的方法......

function isValid(f)
{
    var cb = document.getElementById('<%=CheckBoxList1_3.ClientID%>');
    if(cb && cb.checked)
    {
        var tb = document.ElementById('<%=txt2other.ClientID%>');
        if(tb && tb.value.length > 0)
        {
            f.submit();
        }
        else
        {
            alert('Please enter a comment in question #2.');
        }
    }
}

如果您有很多这些，请尝试在value=other之类的复选框上设置属性，这样当您循环选中复选框时，可以使用if(cb.checked && cb.value == 'other')

如何在checkboxlist控件的列表中获取值并使用它来验证

1 个答案: