[Resolved] Check parent category when checking the children in CRED Form

[Author]

Posts

[sergioJ-2]

Tell us what you are trying to do?

In the frontend cred form, When a child category is selected, automatically check the parent categories. When a parent category is unchecked, uncheck the child categories. And when there is no child category anymore selected, uncheck a parent category.

Is there any documentation that you are following?

I've found this code on internet, but It didnt work:

jQuery(document).ready(function($){
synchronize_child_and_parent_category($);
});

function synchronize_child_and_parent_category($) {
$('#categoria-grok').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');
}
});
});
}

Is it possible to adapt this code to achieve the result I need?

What is the link to your site?
hidden link

[sergioJ-2]

I've found another code, that maybe could suit to my need. But I don't know how to adapt it. Could you help me?

jQuery(document).on( 'ready', function($){
$('.categorychecklist').on( 'click', 'input[type="checkbox"]', function(){
if ( ! $(this).is( ':checked' ) ) return;

$(this).closest( 'ul.children' )
.parentsUntil( '.categorychecklist', 'li' )
.children( 'label' )
.children( 'input[type="checkbox"]' )
.prop( 'checked', true );
});
});

[sergioJ-2]

I've worked hard to figure out how to figure out how to solve it. I don't know if it is the best solution, but now it seems to work perfectly. The following needs were covered:

• Check parent when a child is marked
• Uncheck parent when all children are unmarked
• Allow only children to be selected (and hide the parent checkbox with .CSS)
• define a limit of chidren for being selected

I hope the code can help other people with the same need, as I saw in other posts here at support. And if someone (support people include) have a better solution, with less code and more efficient, I would love to receive the feedback.

HTML FROM Example

[credform]
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			[cred_field field='form_messages' class='alert alert-warning']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-titulo">
			<h2>Nome da forma de jogar</h2>
			[cred_field field='post_title' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-objetivo">
			<h2>Objetivo do jogo</h2>
			[cred_field field='ts-objetivo-do-jogo' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-4 frm-baralhos">
			<h3>Baralhos utilizados</h3>
          [cred_field field='ts-baralhos-utilizados' force_type='field' class='form-check-input' output='bootstrap']
		</div>
		<div class="form-group col-md-4 frm-jogadores">
			<h3>Número de jogadores</h3>
			[cred_field field='numero-de-jogadores' force_type='taxonomy' output='bootstrap' display='checkbox']
		</div>
		<div class="form-group col-md-4 frm-rodadas">
			<h3>Durações das rodadas</h3>
			[cred_field field='duracao-da-rodada' force_type='taxonomy' output='bootstrap' display='checkbox']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-categorias">
			<h3>Categorias</h3>
			[cred_field field='categoria-grok' force_type='taxonomy' output='bootstrap' display='checkbox']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-materiais-adicionais">
			<h2>Materiais adicionais</h2>
			[cred_field field='ts-materiais-adicionais' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-preparacao">
			<h2>Preparação antecipada</h2>
			[cred_field field='ts-preparacao-antecipada' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-como-jogar">
			<h2>Como jogar</h2>
			[cred_field field='ts-como-jogar' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-12 frm-aprendizados">
			<h2>Aprendizados e reflexões</h2>
			[cred_field field='ts-aprendizados-e-reflexoes' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-4 frm-proposto-por">
			<label>Forma de jogar proposta por</label>
			[cred_field field='ts-forma-de-jogar-proposta-por' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-md-4 frm-email-proposta">
			<label>E-mail de quem enviou</label>
			[cred_field field='ts-email-de-quem-enviou' force_type='field' class='form-control' output='bootstrap']
		</div>
		<div class="form-group col-md-4 frm-revisado-por">
			<label>Forma de jogar revisada por</label>
			[cred_field field='forma-de-jogar-revisada-por' force_type='field' class='form-control' output='bootstrap']
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 frm-submit">
			[cred_field field='form_submit' output='bootstrap' value='Enviar' class='btn btn-primary btn-lg']
		</div>
	</div>
</div>
[/credform]

CSS

.frm-categorias .wpt-form-set-children li  {
    display:inline-flex;
    background: #f5f5f5;
  	margin: 0 10px 20px 0;
  	padding: 5px 20px;
	border-radius: 20px;
}

.frm-categorias div > ul > li > label {
    pointer-events: none1;
    user-select: none;
    color: #fff;
    background: #009fb7;
    padding: 5px 20px;
    border-radius: 20px;
    float: left;
    margin-right: 10px;
}

.frm-categorias div > ul > li > label > .checkbox {
  display: none !important;
}

.frm-jogadores li, .frm-rodadas li {
    padding: 5px;
    margin-right:10px;
    display:inline-flex;
}

.row {
  margin-bottom:30px;
}

h2 {
  color: #4054B2;
  font-size: 26px;
 }

h3 {
  color: #4054B2;
  font-size: 22px;

JS

//declaração de variáveis globais
var grok = '[name="categoria-grok[]"]';

//Valida número de caixas marcadas para categorias
jQuery(document).ready(function ($) {
  var tema_limit = 5;  

  $(grok).on('change', function(evt) {
    if($('.wpt-form-set-children '+ grok +':checked').length > tema_limit) {
      this.checked = false;
      window.alert('Você pode selecionar no máximo '+ tema_limit +' subcategorias');
    }
  });
});

jQuery(document).ready(function($){

  $(grok).click(function(){
    var $cat_selected = $(this).attr('data-parent');
    var $class_mae = $(this).parents('ul').parents('li').attr('class');
    var $cat_mae = (grok + '[value=' + $cat_selected + ']');
    var $children_ativos = $('.'+$class_mae).find(":checkbox:checked").length; 
    var $campo_mae = $('.tax-categoria-grok-'+ $cat_selected);
    
    if(this.checked){
        $campo_mae.find('input[type=checkbox]').prop('checked',true);
    }else {
      if($children_ativos == 0){
        $campo_mae.find('input[type=checkbox]').prop('checked',false);
      }
    }
  });
});

[Waqar]

Hi,

Thank you for contacting us and for sharing your solution.

Your approach does seem to be the efficient one and this will definitely help out other users, looking for the same functionality.

We appreciate your contribution to the forum and please keep your feedback, questions, and suggestions coming.

Note: You're welcome to mark this ticket as resolved and for a new question/concern, please open a new one.

regards,
Waqar