Show and search fields and according to selected checkbox field?

Asked

Viewed 497 times

1

How do I make these rules work at Checkbox?

When Selected "outsourcing" Shows "divOutsourcing", When You Select "audit" Shows "divAuditoriaOptions", When You Select "consulting" Shows "divConsulatoriesOptions"

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>
javascript jquery checkbox input

2 answers

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");
        })
    });

  • Aline, I appreciate the help, but it didn’t work.

  • What didn’t work out?

  • You did, to appear if I select any option. And it would have to be for each option, a Form-group appears. as I explained in the post.

  • Look, I tested it and it’s working. I made a change because a debt was out of parole. But it’s working, yes... For each selected option, a div appears below.

  • Gosh, I made the changes you posted, but it still doesn’t work.

  • You have added jquery?

  • Yes. Just like you posted.

  • I refer to the reference of jquery: https://code.jquery.com/jquery-3.0.js in the header of the page...

  • Yes. I had included it as well. But we have solved it. Thank you for the strength, Aline!!

Show 4 more comments

1


You can do it like this:

Add data-label on your Ivs that will be displayed/hidden with the corresponding input value, example:

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

NOTE: In case you want the Divs start hidden just put the display: None inside their style.

  • Junior, it worked perfectly. Thank you!!!

Browser other questions tagged javascript jquery checkbox input

You are not signed in. Login or sign up in order to post.