How to check dynamic group checkbox?

Suppose that I have an admin panel and there have a content management system. And contents are belong to  categories. Each category may have lots of contents and I want to delete the contents of each category separately. To make it possible first we will make an interface so that anybody can understand what is going to be happened through this post.

<ul>

<li>
<input type=”checkbox” id=”category_id1″ />
<ul>
<li><input id=”content_id1″ name=”catgroup_id1″ type=”checkbox” /></li>
<li><input id=”content_id2″ name=”catgroup_id1″ type=”checkbox” /></li>
<li><input id=”content_id3″ name=”catgroup_id1″ type=”checkbox” /></li>
</ul>
<li> <input id=”category_id2″ type=”checkbox” />
<ul>
<li><input id=”content_id4″ name=”catgroup_id2″ type=”checkbox” /></li>
<li><input id=”content_id5″ name=”catgroup_id2″ type=”checkbox” /></li>
<li><input id=”content_id6″ name=”catgroup_id2″ type=”checkbox” /></li>
</ul>
</li>

If we extend the above code then the format becomes like below –
<ul> Content_model-&gt;getContentsByParent($category-&gt;cate_id);
?&gt;
<li> <input id=”category_&lt;?=$category-&gt;cate_id?&gt;” onclick=”checkGroupBox(‘&lt;?=$category-&gt;cate_id?&gt;’)” type=”checkbox” />
<ul>
<li><input id=”content_&lt;?=$content-&gt;content_id?&gt;” name=”catgroup_&lt;?=$category-&gt;cate_id?&gt;” type=”checkbox” /></li>
</ul>
</li>
</ul>

and after above done here is our jQuery code to check the group checkbox below –

<script type=”text/javascript”><!–
function checkGroupBox(id){
var groupname = ‘catgroup_’+id;
var checkedvalue = $(‘#category_’+id).attr(‘checked’) ? ‘checked’ : ”;
$(‘input[name=’+groupname+’]’).attr(‘checked’, checkedvalue);
}
// –></script>

You must link  jQuery core file to use this jQuery code that I have done on my some of last post. I have also used CodeIgniter’s code here and iterative looping system but you can use recursive function instead of iterative looping system which is advanced technique and more flexible. I will post some tutorials using recursive function in the future.

Advertisements

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: