Show and delete fields and according to checkbox field selected?

0

How do I make these rules work in Checkbox?

When Selected "outsourcing" Shows "divOutsourcing", When Selects "Audit" Shows "divAuditoriaOptions", When Selects "Consulting" Shows "divConsultingOptions"

Remembering that the same options have to disappear, as the Selection is removed.

  

HTML

<div class="form-group" style="margin: 0 auto;" id="divAreaServico" >   
    <label for="segmento" class="control-label col-md-1">Segmento:</label>          
    <div class="col-md-8">                                      
        <div class="checkbox" id="segmento">
            <label><input type="checkbox" name="outsourcing" value="outsourcing">Outsourcing</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                      
            <label><input type="checkbox" name="auditoria" value="auditoria">Auditoria</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" name="consultoria" value="consultoria">Consultoria</label>                                                                                                                                
        </div>
    </div>                                  
</div>
<div class="form-group" style="margin: 0 auto;" id="divOutsourcing" >   
    <label for="out" class="control-label col-md-1">Outsourcing:</label>    
    <div class="col-md-8">                                      
        <div class="checkbox" id="outsourcing">
            <label><input type="checkbox" name="contabil" value="contabil">Contábil</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" name="financeira" value="financeira">Financeira</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                         
            <label><input type="checkbox" name="fiscal" value="fiscal">Fiscal</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                                 
            <label><input type="checkbox" name="folhaPagamento" value="folhaPagamento">Folha de Pagamento</label>                                                                                                                               
        </div>
    </div>                                  
</div>                                              


<div class="form-group" style="margin: 0 auto;" id="divConsultoriaOpcoes" >                                                 
    <div class="col-md-8">
        <label for="consultoriaOpcoes" class="control-label vForm"> Consultoria:</label>
        <input type="text" class="form-control" name="consultoriaOpcoes" id="consultoriaOpcoes" required />
    </div>
</div>
<div class="form-group" style="margin: 0 auto;" id="divAuditoriaOpcoes" >                                                   
    <div class="col-md-8">
        <label for="auditoriaOpcoes" class="control-label vForm"> Auditoria:</label>
        <input type="text" class="form-control" name="auditoriaOpcoes" id="auditoriaOpcoes" required />
    </div>
</div>
    
asked by anonymous 10.05.2017 / 21:05

2 answers

0

You can do this:

Add data-label to your divs that will be displayed / hidden with the corresponding input value, eg

<div class="form-group" style="margin: 0 auto;" id="divConsultoriaOpcoes" data-label="consultoria">

$('#segmento input[type="checkbox"]').change(function() {
  
  let name = this.value;
  
  $('[data-label=' + name + ']').css('display', this.checked ? '' : 'none');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="form-group" style="margin: 0 auto;" id="divAreaServico" >   
    <label for="segmento" class="control-label col-md-1">Segmento:</label>          
    <div class="col-md-8">                                      
        <div class="checkbox" id="segmento">
            <label><input type="checkbox" name="outsourcing" value="outsourcing">Outsourcing</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                      
            <label><input type="checkbox" name="auditoria" value="auditoria">Auditoria</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" name="consultoria" value="consultoria">Consultoria</label>                                                                                                                                
        </div>
    </div>                                  
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="divOutsourcing" data-label="outsourcing">   
    <label for="out" class="control-label col-md-1">Outsourcing:</label>    
    <div class="col-md-8">                                      
        <div class="checkbox" id="outsourcing">
            <label><input type="checkbox" name="contabil" value="contabil">Contábil</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label><input type="checkbox" name="financeira" value="financeira">Financeira</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                         
            <label><input type="checkbox" name="fiscal" value="fiscal">Fiscal</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                                 
            <label><input type="checkbox" name="folhaPagamento" value="folhaPagamento">Folha de Pagamento</label>                                                                                                                               
        </div>
    </div>                                  
</div>                                              


<div class="form-group" style="margin: 0 auto; display: none;" id="divConsultoriaOpcoes" data-label="consultoria">                                                 
    <div class="col-md-8">
        <label for="consultoriaOpcoes" class="control-label vForm"> Consultoria:</label>
        <input type="text" class="form-control" name="consultoriaOpcoes" id="consultoriaOpcoes" required />
    </div>
</div>
<div class="form-group" style="margin: 0 auto; display: none;" id="divAuditoriaOpcoes" data-label="auditoria">                                                   
    <div class="col-md-8">
        <label for="auditoriaOpcoes" class="control-label vForm"> Auditoria:</label>
        <input type="text" class="form-control" name="auditoriaOpcoes" id="auditoriaOpcoes" required />
    </div>
</div>

NOTE: If you want the divs to start hidden, just put the display: none within their style.

    
10.05.2017 / 22:11
0
<script src="https://code.jquery.com/jquery-3.0.0.js"></script><divid="geral">
    <div class="form-group" style="margin: 0 auto;" id="divAreaServico">
        <label for="segmento" class="control-label col-md-1">Segmento:</label>
        <div class="col-md-8">
            <div class="checkbox" id="segmento">
                <label><input type="checkbox" name="outsourcing" data-id="divOutsourcing" value="outsourcing">Outsourcing</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label><input type="checkbox" name="auditoria" data-id="divAuditoriaOpcoes" value="auditoria">Auditoria</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label><input type="checkbox" name="consultoria" data-id="divConsultoriaOpcoes" value="consultoria">Consultoria</label>
            </div>
        </div>
    </div>

    <div id="div-controle">
        <div class="form-group" style="margin: 0 auto;" id="divOutsourcing">
            <label for="out" class="control-label col-md-1">Outsourcing:</label>
            <div class="col-md-8">
                <div class="checkbox" id="outsourcing">
                    <label><input type="checkbox" name="contabil" value="contabil">Contábil</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><input type="checkbox" name="financeira" value="financeira">Financeira</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><input type="checkbox" name="fiscal" value="fiscal">Fiscal</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label><input type="checkbox" name="folhaPagamento" value="folhaPagamento">Folha de Pagamento</label>
                </div>
            </div>
        </div>


        <div class="form-group" style="margin: 0 auto;" id="divConsultoriaOpcoes">
            <div class="col-md-8">
                <label for="consultoriaOpcoes" class="control-label vForm"> Consultoria:</label>
                <input type="text" class="form-control" name="consultoriaOpcoes" id="consultoriaOpcoes" required />
            </div>
        </div>
        <div class="form-group" style="margin: 0 auto;" id="divAuditoriaOpcoes">
            <div class="col-md-8">
                <label for="auditoriaOpcoes" class="control-label vForm"> Auditoria:</label>
                <input type="text" class="form-control" name="auditoriaOpcoes" id="auditoriaOpcoes" required />
            </div>
        </div>
        <div>
        </div>
    </div>
</div>

CSS:

#div-controle .form-group {
        display: none;
    }

JQuery:

$(document).ready(function () {
        $("#segmento input[type=checkbox]").change(function () {
            $("#div-controle .form-group").css("display", "none");
            $("#" + $(this).data("id")).css("display", "block");
        })
    });
    
10.05.2017 / 21:15