我有一个 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");
}
});
最佳答案
我假设您没有在 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 动态地操作图像。
所以剩下的代码是这样的:
检查日期文本框是否包含一些值:
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"); } }
检查用户是否更改了单选按钮:
$("rblWarrantyDate").change(function() { if ($(this).val() == '1') { WarrantyStatus = 1; if(dateStatus != 0) $(".check-empty").addClass("checked-green"); } else WarrantyStatus = 0; });
关于javascript - 使用JS检测文本框何时有值和单选按钮列表何时有选定索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13801427/