Amit
Reputation: 823
Multiple checkbox lists auto-generated by jQuery
I want to add multiple checkboxes to my project which are used to define role and rights for my project.
Please see my following CSHTML and jQuery code.
CSHTML code :
@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>
</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>
</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>
</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>
</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>
My problem is that I want be able to dynamically add multiple check box values with their own id; how would I do this?
Upvotes: 0
Views: 183
Answers (1)
Pawan Lakhara
Reputation: 1150
Try this:
Add hidden field on your page and try to store value in hidden field. by using View to controller so there is need of hidden field. i hope this will help for you.
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>
</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>
</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>
</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>
</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;
}
});
Upvotes: 1
Related Questions
- how to create a checkboxlist in ASP.Net MVC using jquery
- A checkbox for selecting all checkboxes generated by CheckBoxFor
- Jquery check all dynamic checkboxlist in MVC view
- Create Checkbox (or checkboxlist) from a list using foreach
- Populating checkboxes
- checkbox list to generate one textbox
- ASP.NET MVC 3 - multiple checkbox list
- Create checkbox list on the fly with JQuery
- checkboxes jquery
- How do I implement a checkbox list in ASP.NET MVC?