Javascript Ocultar/Exibir Div por CHECKBOX!

[Mizrain Phelipe Sá]

Tenho um código com 3 checkbox e gostaria que ao selecionado cada um deles abrisse uma div especifica(item1,item2,item3) e se desmarcado ela fosse oculta, porém não estou conseguindo fazer o código JS, o HTML e esse:

 

<div class="row pmd-textfield">
                <div class="form-group col-md-4" id="blocoAssociacao">
                    <div class="checkbox pmd-default-theme">
                        <label class="pmd-checkbox pmd-checkbox-ripple-effect">
                            <input type="checkbox" value="" id="checkAssociacao">
                            <span> 1. Associação Criminosa</span>
                        </label>
                    </div>
                    <div class="checkbox pmd-default-theme">
                        <label class="pmd-checkbox pmd-checkbox-ripple-effect">
                            <input type="checkbox" value="">
                            <span> 2.Facção</span>
                        </label>
                    </div>
                    <div class="checkbox pmd-default-theme">
                        <label class="pmd-checkbox pmd-checkbox-ripple-effect">
                            <input type="checkbox" value="">
                            <span> 3.Organização Criminosa</span>
                        </label>
                    </div>
                </div>
                <div class="form-group col-md-4" style="display:none;">
                    <div id="item1">                       
                        <input class="form-control" id="" maxlength="1000" type="text" placeholder="Detalhes" name="detalhesAssocioacao">
                    </div>
                    <div id="item2">                       
                        <input class="form-control" id="" maxlength="1000" type="text" placeholder="Detalhes">
                    </div>
                    <div id="item3">                       
                        <input class="form-control" id="" maxlength="1000" type="text" placeholder="Detalhes">
                    </div>
                </div>
            </div>           

Se alguém poder ajudar agradeço.

[DiF]

@Mizrain Phelipe Sá Com jQuery, você pode usar a função attr ou prop...  e definir show()  ou hide() para os elementos que desejar.

[Mizrain Phelipe Sá]

1 minuto atrás, DiF disse:

@Mizrain Phelipe Sá Com jQuery, você pode usar a função attr ou prop...  e definir show()  ou hide() para os elementos que desejar.

se poder mostrar um exemplo, não entendi direito.

[DiF]

@Mizrain Phelipe Sá Na verdade, há diversas formas de fazer. Podes usar o toggle também.

 

<input type="checkbox" class="check">Abrir e Fechar  

<div class="box"></div>

$(document).ready(function(){
     $('.check').on('click',function() {
        $(".box").toggle(this.checked);
    });
});

 

Com prop :

 

if($('.check').prop('checked')) {
    
    $(".box").show();
} else {
    
   $(".box").hide();
}

Só não esqueça de usar o display: none, no elemento que vai ser escondido e mostrado