由jQuery自动生成的多个复选框列表

时间:2014-06-07 05:12:14

标签: javascript jquery asp.net-mvc-3

我想在项目中添加多个复选框,用于定义项目的角色和权限。

请参阅我的以下CSHTML和jQuery代码。

CSHTML代码:

@using (@Html.BeginForm())
{ 
 <table cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr>
                <td>
                    <div class="content" style="background-color: #fff; margin-top: 20PX;">
                        <div class="page-header">
                            <div style="float: left; margin: 0PX; padding: 0px;">
                                <h1>
                                    Web Menu Rights
                                </h1>
                            </div>
                        </div>
                        <div style="margin-left: 10px">
                            <b class="lblblack">Department Name : </b>
                            @Html.DropDownList("DEPARTMENT", null, "--Select One--", new { style = "width: 280px", @id = "DEPARTMENT", @name = "DEPARTMENT" })
                            <input type="button" id="btnView" name="btnView" value="View" class="btn btn-flat btn-primary" />
                        </div>
                        <div class="page-container" id="page_BCEBC">
                            <div class="row" style="margin-left: 20px;">
                                <table cellpadding="2" cellspacing="0" width="80%" class="gridview">
                                    <tbody>
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Main Menu</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right; width: 400px;">
                                                <b class="lblblack">Title :</b>
                                            </td>
                                            <td>
                                                <b class="lblblack">Is Display</b>
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_H)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView = "chkView_";
                                            <tr id="trobjname_B">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_b">
                                                    <input id="hfObjId_B" name="hfObjId_B" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_B == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Quick Links</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_D)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView = "chkView_";
                                            <tr id="trobjname_B">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_b">
                                                    <input id="hfObjId_B" name="hfObjId_B" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_B == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td>
                                            </td>
                                            <td align="left">
                                                <input id="btnSave" type="submit" value="Save" name="btnSave" class="btn btn-flat btn-primary" />
                                                <input id="btncancel" name="btncancel" type="submit" value="Cancel" class="btn btn-flat btn-danger" onclick="window.location = '@Url.Action("Web_Menu_Rights", "web_portal_entry")'; return false;" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="page-container" id="page_FDC">
                            <div class="row" style="margin-left: 20px;">
                                <table cellpadding="2" cellspacing="0" width="80%" class="gridview">
                                    <tbody>
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Main Menu</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right; width: 400px;">
                                                <b class="lblblack">Title :</b>
                                            </td>
                                            <td>
                                                <b class="lblblack">Is Display</b>
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_H)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView2 = "chkView2_";
                                            <tr id="trobjname_F">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_f">
                                                    <input id="hfObjId_F" name="hfObjId_F" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_F == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Quick Links</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_D)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView2 = "chkView2_";
                                            <tr id="trobjname_F">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_f">
                                                    <input id="hfObjId_F" name="hfObjId_F" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_F == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td>
                                            </td>
                                            <td align="left">
                                                <input id="btnSave2" type="submit" value="Save" name="btnSave2" class="btn btn-flat btn-primary" />
                                                <input id="btncancel2" name="btncancel" type="submit" value="Cancel" class="btn btn-flat btn-danger" onclick="window.location = '@Url.Action("Web_Menu_Rights", "web_portal_entry")'; return false;" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
}

jQuery:

    <script type="text/javascript">
        $(document).ready(function () {
     $("#btnSave").click(function () {
                var cnt = $("input:checked").length;
                if (cnt > 0) {
                    var Add = "";
                    $("#trobjname_B,#dept_id_b").each(function () {
                        var id_chkView = $(this).find('.chkView').attr('id');
                        var isView = $('#' + id_chkView).is(':checked') ? "1" : "0";
                 ????
                    });
                }
                else {
                   return false;
                }
            });
    });
</script>

我的问题是我希望能够使用自己的id动态添加多个复选框值;我该怎么做?

1 个答案:

答案 0 :(得分:1)

试试这个:

在页面上添加隐藏字段,并尝试将值存储在隐藏字段中。 通过使用View to controller,所以需要隐藏字段。我希望这对你有所帮助。

CSHTML:

<table cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr>
                <td>
                    <input type="hidden" id="hidObjects_B" name="hidObjects_B" />
                    <input type="hidden" id="hidObjects_F" name="hidObjects_F" />
                    <div class="content" style="background-color: #fff; margin-top: 20PX;">
                        <div class="page-header">
                            <div style="float: left; margin: 0PX; padding: 0px;">
                                <h1>
                                    Web Menu Rights
                                </h1>
                            </div>
                        </div>
                        <div style="margin-left: 10px">
                            <b class="lblblack">Department Name : </b>
                            @Html.DropDownList("DEPARTMENT", null, "--Select One--", new { style = "width: 280px", @id = "DEPARTMENT", @name = "DEPARTMENT" })
                            <input type="button" id="btnView" name="btnView" value="View" class="btn btn-flat btn-primary" />
                        </div>
                        <div class="page-container" id="page_BCEBC">
                            <div class="row" style="margin-left: 20px;">
                                <table cellpadding="2" cellspacing="0" width="80%" class="gridview">
                                    <tbody>
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Main Menu</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right; width: 400px;">
                                                <b class="lblblack">Title :</b>
                                            </td>
                                            <td>
                                                <b class="lblblack">Is Display</b>
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_H)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView = "chkView_";
                                            <tr id="trobjname_B">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_b">
                                                    <input id="hfObjId_B" name="hfObjId_B" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_B == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Quick Links</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_D)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView = "chkView_";
                                            <tr id="trobjname_B">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_b">
                                                    <input id="hfObjId_B" name="hfObjId_B" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_B == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView@obj_id" class="chkView" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td>
                                            </td>
                                            <td align="left">
                                                <input id="btnSave" type="submit" value="Save" name="btnSave" class="btn btn-flat btn-primary" />
                                                <input id="btncancel" name="btncancel" type="submit" value="Cancel" class="btn btn-flat btn-danger" onclick="window.location = '@Url.Action("Web_Menu_Rights", "web_portal_entry")'; return false;" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="page-container" id="page_FDC">
                            <div class="row" style="margin-left: 20px;">
                                <table cellpadding="2" cellspacing="0" width="80%" class="gridview">
                                    <tbody>
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Main Menu</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right; width: 400px;">
                                                <b class="lblblack">Title :</b>
                                            </td>
                                            <td>
                                                <b class="lblblack">Is Display</b>
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_H)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView2 = "chkView2_";
                                            <tr id="trobjname_F">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_f">
                                                    <input id="hfObjId_F" name="hfObjId_F" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_F == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td style="text-align: left;">
                                                <h3>
                                                    Quick Links</h3>
                                            </td>
                                            <td>
                                                &nbsp;
                                            </td>
                                        </tr>
                                        @foreach (var a in ViewBag.List_D)
                                        {
                                            var obj_id = @a.OBJECT_ID;
                                            var chkView2 = "chkView2_";
                                            <tr id="trobjname_F">
                                                <td style="text-align: right; width: 200px;">
                                                    <b class="lblblack">@a.OBJECT_NAME :</b>
                                                </td>
                                                <td style="text-align: left;" id="dept_id_f">
                                                    <input id="hfObjId_F" name="hfObjId_F" type="hidden" value="@obj_id" />
                                                    @if (@a.DEPT_ID_F == 1)
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" checked="checked"/>

                                                    }
                                                    else
                                                    {
                                                        <input type="checkbox" id="@chkView2@obj_id" class="chkView2" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                        <tr>
                                            <td>
                                            </td>
                                            <td align="left">
                                                <input id="btnSave2" type="submit" value="Save" name="btnSave2" class="btn btn-flat btn-primary" />
                                                <input id="btncancel2" name="btncancel" type="submit" value="Cancel" class="btn btn-flat btn-danger" onclick="window.location = '@Url.Action("Web_Menu_Rights", "web_portal_entry")'; return false;" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

Jquery的:

 $("#btnSave").click(function () {
            var cnt = $("input:checked").length;
            if (cnt > 0) {
                var Add = "";
                $("#trobjname_B > #dept_id_b").each(function () {
                    var id_chkView = $(this).find('.chkView').attr('id');
                    var isView = $('#' + id_chkView).is(':checked') ? "1" : "0";
                    Add += $(this).find("#hfObjId_B").val() + "!";
                    Add += isView + "$";
                });
                $("#hidObjects_B").val(Add);
            }
            else {
                alert("Please check atleast one checkbox");
                return false;
            }
        });