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;        

});

posted @ 2012-10-25 16:31  琴子  阅读(1379)  评论(0编辑  收藏  举报