Dwupoziomowe drzewo kategorii z wykorzystaniem Javascript oraz JQuery

Poniższe rozwiązanie stanowi przykładową implementację dwupoziomowego drzewa kategorii z wykorzystaniem skryptów Javascript oraz biblioteki JQuery. Zaznaczenie głównej kategorii powoduje automatyczne zaznaczenie kategorii podrzędnych. Odznaczenie kategorii podrzędnej powoduje natomiast automatyczne odznaczenie kategorii nadrzędnej. A o to implementacja:

Niezbędny kod html:

<div><input type="checkbox" class="parent_checkbox" id="options_cat_1" name="options_cat_1">
kat 1
</div>

<div style="padding-left: 25px;"><input type="checkbox" class="parent_cat_1 child_checkbox" name="options_cat_11" value="1"> 
nowa kategoria
</div>

<div style="padding-left: 25px;"><input type="checkbox" class="parent_cat_1 , child_checkbox" name="options_cat_3" value="1">
pod kat 1
</div>

<div style="padding-left: 5px;">
<input type="checkbox" class="parent_checkbox" id="options_cat_2" name="options_cat_2">
kat 2
</div>

<div>
<input type="checkbox" class="parent_checkbox" id="options_cat_10" name="options_cat_10">
nowa nazwa
</div>

Ważne jest umieszczenie w kodzie html podanych nazw klas, identyfikatorów oraz nazw elementów. Poniżej znajduje się kod Javascript wykonujący operacje na elementach:

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery(".parent_checkbox").click( function() {
   var name=this.name;
   var id_parent = name.replace("options_cat_", "");
   var class_parent=".parent_cat_"+id_parent;

 if(jQuery(this).prop("checked")) {
    jQuery(class_parent).prop("checked", true );
 } else {
   jQuery(class_parent).prop("checked", false );
 }
});


jQuery(".child_checkbox").click( function() {
 if(jQuery(this).prop("checked")==false) {

 var classNames = jQuery(this).attr("class").toString().split(" ");

  var re = new RegExp("parent_cat_[0-9]+");

  $.each(classNames, function (i, className) {
    if(className.match(re)){
       var id_parent = className.replace("parent_cat_", "");
       var parent_name = "#options_cat_" + id_parent;
       jQuery(parent_name).prop("checked", false );
  }
 });
 }
});

});
</script>

W skrypcie wykorzystujemy akcję onclick na elementach posiadających klasę .parent_checkbox oraz .child_checkbox. Funkcja jQuery(.class_name).prop("checked", false ) powoduje zaznaczenie bądź odznaczenie elementu checkbox, w zależności od podanego parametru. W podanym przykładzie skorzystaliśmy również z wyrażenia regularnego, które to wywołane w pętli sprawdza czy element zawiera klasę, którego nazwa pasuje do podanego wzorca wyrażenia regularnego.