[Resolved] select the parent if user select the child JS

[Author]

Posts

[JakubV7709]

Hi guys, is it possible to setup JS code for automaticlly select the parent if user select the child? I found this and im trying to parse it to my form without succes. It will be helful for another users of toolset.

jQuery(document).ready(function($){
  synchronize_child_and_parent_category($);
});
 
function synchronize_child_and_parent_category($) {
  $("input[name='vyrobce[]']").find('input').each(function(index, input) {
    $(input).bind('change', function() {
      var checkbox = $(this);
      var is_checked = $(checkbox).is(':checked');
      if(is_checked) {
        $(checkbox).parents('li').children('label').children('input').attr('checked', 'checked');
      } else {
        $(checkbox).parentsUntil('ul').find('input').removeAttr('checked');
      }
    });
  });
}

I want to use for my taxanomy:

<div class="form-group col-sm-4">
<label>Choose vendor:</label>
<div class="vyrobceform">
[cred_field field='vyrobce' force_type='taxonomy' output='bootstrap' display='checkbox' class='vyrobceform']
[cred_field field="vyrobce_add_new" taxonomy="vyrobce" type="add_new"]
</div></div>

Thank you

[Minesh]

Can you please check now: hidden link

I've added the following code to your form's JS box:

jQuery(document).ready(function($){
  
  id = jQuery('[name="vyrobce[]"]').attr("id");
  
   $("input[name='vyrobce[]']").each(function(index, input) {
     
      $(this).on("change",function(){
         var checkbox = $(this);
        var is_checked = $(checkbox).is(':checked');
        var parent = $(this).data("parent");
         if(is_checked) {   
          $('input[value="'+parent+'"').prop('checked', true);
         }else{
            $('input[value="'+parent+'"').prop('checked', false);
         }
    });
  
  });

});

It will automatically check/uncheck the parent based on the checkbox state.

[JakubV7709]

Hi Minesh,

it works almost perfect, but is there a way how to unselect parent ONLY if all of the child is unselect? Let me explain it better:

1) User select child of parent - it will select parent perfectly!
2) User select second child of parent - it will keep selecting of parent (its ok).
3) User unselect one of the child from parent - it will unselect parent :-/ - i just need to keep unselect parent when the one of child is selected

I need to unselect parent of child only if user will unselect all of the child of parent.

[Minesh]

Can you please check now: hidden link

I've adjusted the code again as given under:

jQuery(document).ready(function($){
  
  id = jQuery('[name="vyrobce[]"]').attr("id");
  
   $("input[name='vyrobce[]']").each(function(index, input) {
     
      $(this).on("change",function(){
         var checkbox = $(this);
        var is_checked = $(checkbox).is(':checked');
        var parent = $(this).data("parent");
         if(is_checked) {   
          $('input[value="'+parent+'"').prop('checked', true);
         }else{

           var count =  $("input[name='vyrobce[]']:checked").length - 1;
          
           if(count==0){
            	$('input[value="'+parent+'"').prop('checked', false);
           }
         }
    });
  
  });

});

I hope its working as expected now 🙂

[JakubV7709]

My issue is resolved now. Thank you!