jquery - 列表checkbox选中,未选中,最后一个选中,区分三种不同的背景色
MVC3 Html代码:
<tbody id="eqplist">
<tr class="item_list_table_con">
<td class="us1">
<input type="checkbox" value="@m.Eqp_id" class="checkboxGroups" />
</td>
<td>@m.Eqp_code</td>
<td>@m.Eqp_name</td>
<td>@m.Description</td>
<td class="us6">
<span class="edit">@Html.ActionLink(" ", "GetEqp", new { id = m.Eqp_id }, new { @class = "editEqp", @title = @T ("Evo.Web.View.Common.Update"), @id = m.Eqp_id })</span>
<span class="delete">@Html.ActionLink(" ", "DelEqp", new { id = m.Eqp_id }, new { @class = "deleteEqp", @title = @T("Evo.Web.View.Common.Delete"), @id = m.Eqp_id })</span>
<span class="save_as">@Html.ActionLink(" ", "SaveAsEqp", new { id = m.Eqp_id }, new { @class = "saveAsEqp", @title = @T("Evo.Web.View.Common.SaveAs"), @id = m.Eqp_id })</span>
<div name="hdResult" style="display: none">@TempData["Result"]</div>
<div name="hdType" style="display: none">@TempData["Type"]</div>
<div class="actionResult">@TempData["ActionResult"]</div>
<div class="actionMsg">@TempData["ActionMsg"]</div>
<div class="dialogTitle">@TempData["DialogTitle"]</div>
</td>
</tr>
</tbody>
JQuery代码:
//注册查看事件:单击列表某行时,当前行变色,且checkbox选中,最后一行被选中的行背景颜色加深
$("#eqplist tr.item_list_table_con").die("click").live("click", function () {
var id = $(this).find(".edit a").attr("id");
$check = $(this).find("input[type='checkbox']").first();
if ($check.is(":checked") == false) {
$("input[type='checkbox'][checked]").each(function () {
//遍历被选中CheckBox元素的集合,将所有被选中的input的value值暂时变成默认值“current”
this.value = "current";
});
$("#eqplist tr.item_list_table_con").each(function () {
//如果input的value值为current,则将其背景色变为浅色
if ($(this).find("input[type='checkbox']").attr("value") == "current") {
$(this).removeClass("item_list_selected");
$(this).removeClass("item_list_selected_current");
$(this).addClass("item_list_selected");
//将value值恢复为原来的值
$(this).find("input[type='checkbox']").attr("value", id);
}
});
$(this).addClass("item_list_selected_current");
$check.attr("checked", true);
}
else {
$(this).removeClass("item_list_selected");
$(this).removeClass("item_list_selected_current");
$check.attr("checked", false);
} return false;
});