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>
  <?php
  // php script
  Content_model->getContentsByParent($category->cate_id);
  ?>
  <li>
    <input id=”category_<?=$category->cate_id?>” onclick=”checkGroupBox(’<?=$category->cate_id?>’)” type=”checkbox” />
    <ul>
      <li>
        <input id=”content_<?=$content->content_id?>” name=”catgroup_<?=$category->cate_id?>” 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.

Tags: Jquery, jQuery checkbox, jQuery group checkbox