0

Preciso que para cada uma dessas opções do checkbox (se ela for selecionada) mostre o campo input relacionado a cada um deles. Mas quando seleciono o checkbox não mostra o campo texto relacionado a ele que deveria ser exibido.

Aqui o script que estou utilizando

$('#quais_redes input[type="checkbox"]').change(function() { let name = this.value; $('[data-label=' + name + ']').css('display', this.checked ? '' : 'none'); });
                                              <div class="form-group">
                        <label for ="quais_redes" id="quais_redes">Possui redes sociais?</label>
                        <div class="col-sm-10">
                            <div class="form-check">
                                <input class="form-check-input" id="rede_facebook" type="checkbox" name="redes[]" value="1">
                                    Facebook
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" id="rede_instagram" type="checkbox" name="redes[]" value="2">
                                    Instagram
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" id="rede_twitter" type="checkbox" name="redes[]" value="3">
                                    Twitter
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" id="rede_telegram" type="checkbox" name="redes[]" value="4">
                                    Telegram
                            </div>

                            <div class="form-check">
                                <input class="form-check-input" id="rede_whatsapp" type="checkbox" name="redes[]" value="5">
                                    Whatsapp
                            </div>
                        </div>

                        <div class="form-group" style="margin: 0 auto; display: none;">
                            <label for="instagram">Qual o seu Facebook?</label>
                            <input type="text" class="form-control" name="facebook" id="facebook" data-label="rede_facebook">
                        </div>

                        <div class="form-group" style="margin: 0 auto; display: none;">
                            <label for="instagram">Qual o seu Instagram?</label>
                            <input type="text" class="form-control" name="instagram" id="instagram" data-label="rede_instagram">
                        </div>

                        <div class="form-group" style="margin: 0 auto; display: none;">
                            <label for="twitter">Qual o seu Twitter?</label>
                            <input type="text" name="twitter" class="form-control" id="twitter" data-label="rede_twitter">
                        </div>

                        <div class="form-group" style="margin: 0 auto; display: none;">
                            <label for="twitter">Qual o seu Telegram?</label>
                            <input type="text" name="telegram" class="form-control" id="telegram" data-label="rede_telegram">
                        </div>

                        <div class="form-group" style="margin: 0 auto; display: none;">
                            <label for="twitter">Qual o seu Whatsapp?</label>
                            <input type="text" name="whatsapp" class="form-control" id="whatsapp" data-label="rede_whatsapp">
                        </div>
                    </div>
5
  • E como tentou fazer com JS? Poderia postar o código e descrever o resultado obtido?
    – Woss
    29/12/2020 às 11:25
  • Sim, claro! Então, eu acabei usando esse script, tentei fazer um teste só com um campo mesmo pra ver se funcionava mas não rolou. $(document).ready(function(){ $('#rede_facebook').on('input', function(){ $('#facebook').prop('disabled', false); }); }); E coloquei o disable no campo do facebook. Só que o campo só fica desabilitado e não habilita. Mas na realidade não era pra aparecer o campo antes deu selecionar o checkbox, e ele aparece mesmo sem clicar no checkbox e fica sempre desabilitado. 29/12/2020 às 11:33
  • Seria importante vc tb incluir na sua pergunta o CSS e o JS que vc tentou, assim da para ver ando vc está errando
    – hugocsl
    29/12/2020 às 11:33
  • Sim, Hugo. Mas parando pra analisar, o código do Javascript que eu tinha colocado ele não estava servindo para ocultar e sim somente para desabilitar, sabe? Eu preciso que ele fique oculto, não desabilitado. Então de qualquer forma tava errada a forma que eu estava fazendo mas vou colocar aqui. 29/12/2020 às 11:40
  • Galera, tentei resolver usando Ajax mas não funcionou também, vou editar a postagem colocando essa forma que eu fiz q ta mais completa que a anterior. 29/12/2020 às 12:46

1 Resposta 1

0

Olá, existem algumas incoerências no seu código, e coisas que não estão batendo. Arrumei aqui está funcionando perfeitamente, as etapas:

A tag label for="quais_redes" logo no começo, está sendo um label para a própria label, só está servindo como um texto apenas, e no caso do jQuery na $('#quais_redes input') não existe input no quais_redes como dito antes é um label que não está fazendo nada alí. E em vez de quais_redes pode-se notar que a div que engloba esses checkbox, é a div com a class="col-sm-10", e os inputs estão dentro dela, assim você poderia detectar mudanças dos checkbox com o change() através dela.

No próximo, let name = this.value ao qual ele irá trazer esse value para pegar outro elemento com o data-label = name, porém você pode observar que os values dos inputs checkbox são numeros 1,2,3,4 e 5 e o data-label dos elementos que contém o atributo data-label são rede_nomeDaRedeSocial e não números, logo o que realmente você está querendo pegar para pegar os inputs com o atributo data-label são os id dos input[type="checkbox"], observe o id dos checkbox são rede_nomeDaRedeSocial, ou seja em vez de let name = this.value seria let name = this.id

E por último no css() do jQuery, cada elemento com o [data-label="name"] está dentro do de uma div com a class="form-group" e pode notar que é essa div que tem o display='none' do css, ao qual vc quer alterar, e não o [data-label="name"] em si, até então é essa div pai que tem o atributo style. Assim você pode usar o parent() do jQuery que pega o elemento pai. Ou seja com o parent() ele vai pegar o elemento Pai do elemento com o data-label ao qual você está procurando, e em vai mudar o css dele, no caso o display.

Assim o jQuery ficaria:

$('.col-sm-10 input[type="checkbox"]').change(function(){
        let name = this.id
        $('[data-label="' + name + '"]').parent().css('display', this.checked ? '' : 'none' )
    })

Código Inteiro:

    $('.col-sm-10 input[type="checkbox"]').change(function(){
        let name = this.id
        $('[data-label="' + name + '"]').parent().css('display', this.checked ? '' : 'none' )
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
        <label for ="quais_redes" id="quais_redes">Possui redes sociais?</label>
        <div class="col-sm-10">
            <div class="form-check">
                <input class="form-check-input" id="rede_facebook" type="checkbox" name="redes[]" value="1">
                    Facebook
            </div>

            <div class="form-check">
                <input class="form-check-input" id="rede_instagram" type="checkbox" name="redes[]" value="2">
                    Instagram
            </div>

            <div class="form-check">
                <input class="form-check-input" id="rede_twitter" type="checkbox" name="redes[]" value="3">
                    Twitter
            </div>

            <div class="form-check">
                <input class="form-check-input" id="rede_telegram" type="checkbox" name="redes[]" value="4">
                    Telegram
            </div>

            <div class="form-check">
                <input class="form-check-input" id="rede_whatsapp" type="checkbox" name="redes[]" value="5">
                    Whatsapp
            </div>
        </div>

        <div class="form-group" style="margin: 0 auto; display: none;">
            <label for="instagram">Qual o seu Facebook?</label>
            <input type="text" class="form-control" name="facebook" id="facebook" data-label="rede_facebook">
        </div>

        <div class="form-group" style="margin: 0 auto; display: none;">
            <label for="instagram">Qual o seu Instagram?</label>
            <input type="text" class="form-control" name="instagram" id="instagram" data-label="rede_instagram">
        </div>

        <div class="form-group" style="margin: 0 auto; display: none;">
            <label for="twitter">Qual o seu Twitter?</label>
            <input type="text" name="twitter" class="form-control" id="twitter" data-label="rede_twitter">
        </div>

        <div class="form-group" style="margin: 0 auto; display: none;">
            <label for="twitter">Qual o seu Telegram?</label>
            <input type="text" name="telegram" class="form-control" id="telegram" data-label="rede_telegram">
        </div>

        <div class="form-group" style="margin: 0 auto; display: none;">
            <label for="twitter">Qual o seu Whatsapp?</label>
            <input type="text" name="whatsapp" class="form-control" id="whatsapp" data-label="rede_whatsapp">
        </div>
    </div>

Espero ter ajudado

1

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 .