javascript - 使用JS检测文本框何时有值和单选按钮列表何时有选定索引

Question

我有一个 GridView，它的倒数第二列包含一个文本框(由 jQueryUI DatePicker 小部件填充)和一个 RadioButtonList。此外，最后一列有一个检查图像(类似于 stackoverflow 的“已回答”和“未回答”检查。)

我需要的是能够检测，最好是使用 Javascript，当用户将文本框的值更改为某个内容(在我的例子中是日期)并选择了一个单选按钮，然后将图像源从空复选标记到彩色复选标记(再次类似于 stackoverflow 中的答案检查。)此外，如果用户从文本框中删除所有文本，我需要将图像源更改回空复选标记。哦，我还需要更改图像的替代文本。

我的 GridView

<asp:GridView ID="gvBlah" runat="server" AutoGenerateColumns="false">
            <Columns>
                ...       
                <asp:TemplateField>
                    <HeaderTemplate> 
                        <asp:Label ID="warrantyDateHeader" Text="Warranty Date" ToolTip="Choose a date..." runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="txtWarrantyDate" runat="server" CssClass="datepicker" />
                        <asp:RadioButtonList ID="rblWarrantyDate" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="0" Text="Start" />
                            <asp:ListItem Value="1" Text="End" />
                        </asp:RadioButtonList>
                    </ItemTemplate>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image ID="imgRowChecked" ImageUrl="~/images/check-empty.png" AlternateText="Not Selected"  runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

更新

使用给出的答案，这最终成为最佳解决方案。

var dateStatus = 0 // global variable
var WarrantyStatus = 0 // global variable
$(".datepicker").change(function () {
    if ($(this).val().length == 0) {
        dateStatus = 0;
        $(".chkSerialNumber").removeClass("check-filled").addClass("check-empty");
    }
    else {
        dateStatus = 1;
        if (WarrantyStatus > 0) {
            $(".chkSerialNumber").addClass("check-filled").removeClass("check-empty");
        }
    }
});
$(".rbl").change(function () {
    WarrantyStatus = 1;
    if (dateStatus = 1) {
        $(".chkSerialNumber").addClass("check-filled").removeClass("check-empty");
    }
});

Answer 1

我假设您没有在 gridview 中实现多个编辑。所以这里是 jQuery 代码，它将测试日期文本框中的长度。

我建议您将图像制作为 CSS 类，如下所示:

div.check-empty {
    background: url("/images/check-empty.png") repeat scroll 0 0 transparent;
    height: 11px;
    width: 55px;
}

div.checked-green {
    background: url("/images/check-green.png") repeat scroll 0 0 transparent;
    height: 11px;
    width: 55px;
}

并像这样在 gridview 中默认提供:

<div class="check-empty"></div>

上面的原因是您可以使用 jQuery 动态地操作图像。

所以剩下的代码是这样的:

1. 检查日期文本框是否包含一些值:

   var dateStatus = 0 // global variable
   var WarrantyStatus = 0 // global variable
   
   $('.datepicker').blur(function() 
   {       
      if($(this).val().length == 0)
        dateStatus = 0;
      else
       {
        dateStatus = 1;
        if(WarrantyStatus != 0)
         $(".check-empty").addClass("checked-green");
       }
   
    }
   

2. 检查用户是否更改了单选按钮:

   $("rblWarrantyDate").change(function()
   {
      if ($(this).val() == '1') 
      {
         WarrantyStatus = 1;
         if(dateStatus != 0)
         $(".check-empty").addClass("checked-green");
      }
      else
          WarrantyStatus = 0;
   });