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

how to get a value in a list on a checkboxlist control and use it to validate

本文关键字:验证 获取 checkboxlist 控件 列表      更新时间:2023-09-26

我在asp.net 3.5中有一个表单,它有一个母版页和一个子版页(内容页)。该表单有几个问题,我使用asp.net复选框列表作为问题,因为可以选择多个选项,如果用户在其中一个选项上选择"其他",则他们必须在文本框字段中输入数据。

我制作了以下客户端javascript来验证这一点,但代码似乎没有检查是否选择了Other选项值,我认为这与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>

您的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')