Show or Hide Input According to Selected Radio Button

Asked

Viewed 3,264 times

1

Hello,

I have an html where I want to hide or display some fields according to the button radio selected. However it has not worked, I would like a help. Follow the code:

<script>

$( document ).ready(function() {
     $("#input-custom-field2, #input-custom-field3, #input-custom-field4, #input-custom-field5, #input-custom-field6").hide();
});

$("input:radio[name=custom_field-account-1]").on("change", function () {   
    if($(this).val() == "1")
    {
        $("#input-custom-field2, #input-custom-field3").show(); 
        $("#input-custom-field4, #input-custom-field5, #input-custom-field6").hide();
    }
    else if($(this).val() == "2")
    {
        $("#input-custom-field4, #input-custom-field5, #input-custom-field6").show(); 
        $("#input-custom-field2, #input-custom-field3").hide();   
    }
});
</script>
<div class="radio">
    <label>
        <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-1" value="1">
            Pessoa Física
    </label>
</div>  
<div class="radio">
    <label>
        <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-2" value="2">
            Pessoa Jurídica
    </label>
</div>      
<input type="text" name="custom_field[account][4]" value="" placeholder="Razão Social" id="input-custom-field4" class="form-control" vk_1bc56="subscribed"> 
<input type="text" name="custom_field[account][5]" value="" placeholder="CNPJ" id="input-custom-field5" class="form-control" vk_1bc56="subscribed"> 
<input type="text" name="custom_field[account][6]" value="" placeholder="I.E" id="input-custom-field6" class="form-control" vk_1bc56="subscribed">  
<input type="text" name="custom_field[account][3]" value="" placeholder="RG" id="input-custom-field3" class="form-control" vk_1bc56="subscribed">   
<input type="text" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control" vk_1bc56="subscribed">
javascript jquery

3 answers

2


So you can do:

$(document).ready(function() {
    $('input:radio[name^="custom_field[account][1]"]').on("change", function() {
        var chosen = this.checked && this.value == '1';
        $("#div-custom-field2, #div-custom-field3").toggle(chosen);
        $("#div-custom-field4, #div-custom-field5, #div-custom-field6").toggle(!chosen);
    }).eq(0).attr('checked', true).change();
});

The selector name^="custom_field" indicates all items whose attribute name start with custom_field.

Suggestion:

You could use CSS classes for hide and show. Like you got on the first line inside $( document ).ready(function() { this will generate a FOUC, and with CSS came right out of the box...

Example: https://jsfiddle.net/p9wtsn9a/

  • there is a way to hide the fields on this page (this is the code that helped me, but on this checkout page, they appear blocked from start and not hidden, add a product to the cart and go to the page).

  • @Wendell what are the fields? I only see search products and receive promotions?

  • edited the answer, it is necessary to add a product to the cart and then go to the link I informed, soon after click continue and you will see the fields cnpj, ie, blocked and not hidden

  • @Wendell tests like this $('[id^="input-payment-custom-field"]:disabled').closest('.form-group.custom-field').hide();. Today I can’t help anymore, I’m swamped with work.

  • did not work, but thanks for the help. When you can look, the code was like this: Code.

  • @Wendell in your codepen has some strange letters on field. Test run what I wrote up on the console there on the site and tell if it works.

  • Let’s go continue this discussion in chat.

Show 2 more comments

0

Using your logic you can do so:

          $(document).ready(function() {
            $("#input-custom-field2, #input-custom-field3, #input-custom-field4, #input-custom-field5, #input-custom-field6").hide();
          });

          $("input[type=radio]").on("change", function() {
            if ($(this).val() == "1") {
              $("#input-custom-field2, #input-custom-field3").show();
              $("#input-custom-field4, #input-custom-field5, #input-custom-field6").hide();
            } else if ($(this).val() == "2") {
              $("#input-custom-field4, #input-custom-field5, #input-custom-field6").show();
              $("#input-custom-field2, #input-custom-field3").hide();
            }
          });
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="radio">
  <label>
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-1" value="1">Pessoa Física
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-2" value="2">Pessoa Jurídica
  </label>
</div>
<input type="text" name="custom_field[account][4]" value="" placeholder="Razão Social" id="input-custom-field4" class="form-control" vk_1bc56="subscribed">

0

Use the pj and pf classes in the fields to be displayed and hidden. 

$( document ).ready(function() {
     $("input.pf, input.pj").hide();
     $("#id-custom_field-account-1-1").click(function(){
        if ($(this).prop('checked')){
            $("input.pf").show();
            $("input.pj").hide();    
        } else {
            $("input.pj").show();
            $("input.pf").hide();    
        }
     });
     $("#id-custom_field-account-1-2").click(function(){
        if ($(this).prop('checked')){
            $("input.pj").show();
            $("input.pf").hide();    
        } else {
            $("input.pf").show();
            $("input.pj").hide();    
        }
      });
});
</script>
<div class="radio">
    <label>
        <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-1" value="1">
            Pessoa Física
    </label>
</div>  
<div class="radio">
    <label>
        <input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-2" value="2">
            Pessoa Jurídica
    </label>
</div>      
<input type="text" class="pj" name="custom_field[account][4]" value="" placeholder="Razão Social" id="input-custom-field4" class="form-control" vk_1bc56="subscribed"> 
<input type="text" class="pj" name="custom_field[account][5]" value="" placeholder="CNPJ" id="input-custom-field5" class="form-control" vk_1bc56="subscribed"> 
<input type="text" class="pj" name="custom_field[account][6]" value="" placeholder="I.E" id="input-custom-field6" class="form-control" vk_1bc56="subscribed">  
<input type="text" class="pf" name="custom_field[account][3]" value="" placeholder="RG" id="input-custom-field3" class="form-control" vk_1bc56="subscribed">   
<input type="text" class="pf" name="custom_field[account][2]" value="" placeholder="CPF" id="input-custom-field2" class="form-control" vk_1bc56="subscribed">

Browser other questions tagged javascript jquery

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