1

Como devo fazer para que essas regras funcione no Checkbox?

Quando Selecionado "outsourcing" Mostra "divOutsourcing" , Quando Seleciona "auditoria" Mostra "divAuditoriaOpcoes" , Quando Seleciona "consultoria" Mostra "divConsultoriaOpcoes"

Lembrando que as mesmas opções tem que sumir, conforme é retirada a Seleção.

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>

2 Respostas 2

1

Você pode fazer assim:

Adicione data-label nas suas divs que serão exibidas/ocultadas com o valor do input correspondente, exemplo:

<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>
<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; 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>

OBS.: Caso vocês queira que as divs iniciem ocultas é só colocar o display: none dentro do style delas.

1
  • Junior, Funcionou perfeitamente. Obrigada!!! Commented 10/05/2017 às 20:34
1
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div id="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");
        })
    });
9
  • Aline, eu agradeço a ajuda, mas não funcionou. Commented 10/05/2017 às 19:31
  • O que é que não funcionou?
    – Aline
    Commented 10/05/2017 às 19:46
  • Você fez, pra aparecer se eu selecionar qualquer opção. E teria que ser para cada opção, um Form-group aparece. como expliquei no post. Commented 10/05/2017 às 19:50
  • Olha só, testei e tá funcionando. Fiz uma alteração pq uma div tava fora da condicional. Mas tá funcionando, sim... Para cada opção selecionada, uma div aparece abaixo.
    – Aline
    Commented 10/05/2017 às 19:54
  • Poxa, fiz as alterações que vc postou, mas continua não funcionando. Commented 10/05/2017 às 20:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .