Show and hide fields as checkbox is selected

Asked

Viewed 112 times

0

I need each of these checkbox options (if selected) to show the input field related to each of them. But when I select the checkbox it does not show the related text field that should be displayed.

Here’s the script I’m using

$('#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>
html css checkbox

  • And how did you try to do with JS? You could post the code and describe the result obtained?

  • Yes, of course! So, I ended up using this script, I tried to do a test with just one field to see if it worked but it didn’t. $(Document). ready(Function(){ $('#rede_facebook').on('input', Function(){ $('#facebook').prop('disabled', false); }); }); E put disable in the facebook field. Only the field is only disabled and not enabled. But in reality it was not to appear the field before gave select the checkbox, and it appears even without clicking the checkbox and is always disabled.

  • It would be important to include in your question the CSS and the JS that you tried, so you can see that you are missing

  • Yes, Hugo. But stopping to analyze, the Javascript code that I had put in it was not meant to hide but only to disable, you know? I need it to be hidden, not disabled. So anyway it was wrong the way I was doing but I’ll put here.

  • Guys, I tried to solve using Ajax but it didn’t work either, I will edit the post by putting this way I did q ta more complete than the previous.

1 answer

0


Hello, there are some inconsistencies in your code, and things that are not hitting. I tidied up here is working perfectly, steps:

The tag label for="quais_redes" right at the start, it’s being a label to own label, is only serving as a text only, and in the case of jQuery at $('#quais_redes input') no input exists in quais_redes as said before is a label that is not doing anything there. And instead of quais_redes it can be noted that the div that encompasses these checkbox, is the div with the class="col-sm-10", and inputs are inside it, so you could detect changes in checkbox with the change() through her.

Next, let name = this.value to which it will bring this value to pick up another element with the data-label = name, but you can observe that the values of inputs checkbox are numbers 1,2,3,4 and 5 and the data-label of the elements containing the attribute data-label sane network_nameRedeSocial and not numbers, so what you really want to take to pick up the inputs with the attribute data-label are the id of input[type="checkbox"], observe the id of checkbox sane network_nameRedeSocial, or rather than let name = this.value would be let name = this.id

And lastly in the css() jQuery, each element with the [data-label="name"] is inside a div with the class="form-group" and you can see that this is div who has the display='none' css, which you want to change, and not the [data-label="name"] in itself, until then is this div father who has the attribute style. So you can use the parent() jQuery that picks up the parent element. In other words, with the parent() it will take the element Father element with the data-label to which you are looking, and in will change the css in this case the display.

Then jQuery would be:

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

Entire Code:

    $('.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>

I hope I’ve helped

Browser other questions tagged html css checkbox

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