Show or Hide Input according to Radio Button Selected

1

Hello,

I have an html where I want to hide or display some fields according to the button radio selected. But it has not worked, I would like some help. Here is 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">
    
asked by anonymous 04.08.2016 / 17:45

3 answers

2

So you can do it:

$(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 name^="custom_field" selector indicates all elements whose name attribute starts with custom_field .

Suggestion:

You could use CSS classes for hide and show . As you have in the first line inside $( document ).ready(function() { this will generate a FOUC , and with CSS it was hidden from the start .. .

Example: link

    
04.08.2016 / 17:48
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">
    
04.08.2016 / 19:49
0

Using your logic you can do this:

          $(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><divclass="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">
    
04.08.2016 / 17:58