[英]Change the background color of list item selected in check box list
我在網頁中使用復選框列表,如下所示:
<asp:CheckBoxList ID="chklstTelpas" runat="server" RepeatDirection="Horizontal"
AutoPostBack="True" Width="594px"
OnSelectedIndexChanged="chklstTelpas_SelectedIndexChanged">
<asp:ListItem Text="TELPAS Speaking" Value="1"></asp:ListItem>
<asp:ListItem Text="TELPAS Listening" Value="2"></asp:ListItem>
<asp:ListItem Text="TELPAS Reading" Value="3"></asp:ListItem>
<asp:ListItem Text="TELPAS Writing" Value="4"></asp:ListItem>
</asp:CheckBoxList>
現在,如果我檢查一個列表項,我想為該特定選定項應用一些背景色。 如果我取消選中,我希望背景保持與最初顯示的顏色相同,或者我想刪除背景顏色。
你可以做這樣的事情
for (int i = 0; i < chklstTelpas.Items.Count; i++)
{
if (chklstTelpas.Items[i].Selected)
{
chklstTelpas.Items[i].Attributes.Add("style", "background-color: red;");
}
else
{
chklstTelpas.Items[i].Attributes.Add("style", "background-color: white;");
}
}
這將使您可以為幾種選擇着色。 如果您使用SelectedIndex,它將只會為您提供最低的索引。
protected void chklstTelpas_SelectedIndexChanged(object sender, EventArgs e)
{
Control chk = ((Control)sender).FindControl("chk");
CheckBoxList ch=(CheckBoxList) chk;
if (ch.Items[ch.SelectedIndex].Selected)
ch.Items[ch.SelectedIndex].Attributes.Add("Style", "background-color: red;");
}
希望這可以幫助!!!
您可以對DropDown
SelectedIndexChanged
事件進行操作。
chklstTelpas.Items[chklstTelpas.SelectedIndex].Attributes.Add("style", "background-color:blue;");
我模糊地記得可以通過循環這些項目來完成,對於選中的項目,您可以設置屬性
CheckBoxItem.Attributes.Add("Style", "color: red;")
<asp:CheckBoxList ID="chklstTelpas" runat="server" RepeatDirection="Horizontal"
AutoPostBack="True" Width="594px"
OnSelectedIndexChanged="chklstTelpas_SelectedIndexChanged" CssClass="multiplus">
<asp:ListItem Text="TELPAS Speaking" Value="1"></asp:ListItem>
<asp:ListItem Text="TELPAS Listening" Value="2"></asp:ListItem>
<asp:ListItem Text="TELPAS Reading" Value="3"></asp:ListItem>
<asp:ListItem Text="TELPAS Writing" Value="4"></asp:ListItem>
將css類添加到checkboxlist,然后將jquery代碼編寫為:
var selectedBox = 0;
var lastChecked = null;
$(document).ready(function () {
$(".multiplus input:checkbox").click(
function () {
if ($(this).attr("checked")) {
$(lastChecked).attr("checked", false).parent().css({ "background-color": "#FFF", "font-weight": "normal" });
lastChecked = this;
}
if ($(this).attr("checked")) {
$(this).parent().css({ "background-color": "#FFC", "font-weight": "bold" });
selectedBox++;
} else {
$(this).parent().css({ "background-color": "#FFF", "font-weight": "normal" });
selectedBox--;
}
}
);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.