javascript - Jquery showhide div onclick radiobutton - not working at all - Stack Overflow

I'm spent hours and hours and already try everything I could find on net. Nothing works!

As the title, I need to simple show / hide a div when i the radio is clicked. I tested replacing the radiobuttons with links and worked! But with radiobutton nothing

Javascript

$(document).ready(function(){
    $('.div_entrega_outro').hide();
    $("input[id$='entrega_outro']").click(function() {
        $('.div_entrega_outro').show();
    });

    $("input[id$='entrega_mesmo']").click(function() {
        $('.div_entrega_outro').hide();
    });
});

HTML

<input name="outro_endereco_entrega" id="entrega_mesmo" type="radio" value="N" > <label for="InputName">Entregar no endereço de cadastro</label><br>
<input name="outro_endereco_entrega" id="entrega_outro" type="radio" value="S" > <label for="InputName">Entregar em outro endereço</label>

<div class="div_entrega_outro" >
    bla bla bla
</div

What I alredy tried:

if($('input:radio[name=outro_endereco_entrega]:checked').val() == "N") 

$('#entrega_mesmo').click(function ()

Links tests:

link1 / link2 / link3 - working without radio

Following sideroxylon tip, I did, but no success. I'm very bad with javascript :-(

$(document).ready(function(){
    $('.div_entrega_outro').hide();
    if($('.iradio_square_green:first').hasClass('checked')) {

            $('.div_entrega_outro').show();
    };
});

I'm spent hours and hours and already try everything I could find on net. Nothing works!

As the title, I need to simple show / hide a div when i the radio is clicked. I tested replacing the radiobuttons with links and worked! But with radiobutton nothing

Javascript

$(document).ready(function(){
    $('.div_entrega_outro').hide();
    $("input[id$='entrega_outro']").click(function() {
        $('.div_entrega_outro').show();
    });

    $("input[id$='entrega_mesmo']").click(function() {
        $('.div_entrega_outro').hide();
    });
});

HTML

<input name="outro_endereco_entrega" id="entrega_mesmo" type="radio" value="N" > <label for="InputName">Entregar no endereço de cadastro</label><br>
<input name="outro_endereco_entrega" id="entrega_outro" type="radio" value="S" > <label for="InputName">Entregar em outro endereço</label>

<div class="div_entrega_outro" >
    bla bla bla
</div

What I alredy tried:

if($('input:radio[name=outro_endereco_entrega]:checked').val() == "N") 

$('#entrega_mesmo').click(function ()

Links tests:

link1 / link2 / link3 - working without radio

Following sideroxylon tip, I did, but no success. I'm very bad with javascript :-(

$(document).ready(function(){
    $('.div_entrega_outro').hide();
    if($('.iradio_square_green:first').hasClass('checked')) {

            $('.div_entrega_outro').show();
    };
});

• javascript
• jquery

Share Improve this question Follow edited Jul 27, 2017 at 14:19 Ailton asked Jul 27, 2017 at 1:35 AiltonAilton 16511 silver badge1212 bronze badges 3

• Maybe bootstrap is messing up the things? – Ailton Commented Jul 27, 2017 at 2:53
• With the edit, you still need to add a click function - something like $(document').on('click', '.iradio_square_green', function() {, and then add an else at the end of the conditional, to hide the div in the alternative case. – sideroxylon Commented Jul 27, 2017 at 22:34
• Man, i tried all the 3 javascript codes in the link below, but nothing.. I think the logic is correct. Please, take a look link – Ailton Commented Jul 27, 2017 at 23:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Seems to be working with your code. I didn't change anything. Maybe something on your page is messing it up?

$('.div_entrega_outro').hide();
$("input[id$='entrega_outro']").click(function() {
  $('.div_entrega_outro').show();
});

$("input[id$='entrega_mesmo']").click(function() {
  $('.div_entrega_outro').hide();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="outro_endereco_entrega" id="entrega_mesmo" type="radio" value="N"> <label for="InputName">Entregar no endereço de cadastro</label><br>
<input name="outro_endereco_entrega" id="entrega_outro" type="radio" value="S"> <label for="InputName">Entregar em outro endereço</label>

<div class="div_entrega_outro">
  bla bla bla
</div>

you left out the a symbol to you div

<div class="div_entrega_outro" >
    bla bla bla
</div> <-----here

I added to your js file

$(document).ready(function() {
  $("input[name='outro_endereco_entrega']").click(function() {
    if ($("#entrega_mesmoYes").is(":checked")) {
      $("#div_entrega_outro").show();
    } else {
      $("#div_entrega_outro").hide();
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="chkYes">
  <input type="radio" name="outro_endereco_entrega" id="entrega_mesmoYes" /> Entregar no endereço de cadastro
</label>
<label for="chkNo">
  <input type="radio" name="outro_endereco_entrega" id="entrega_mesmoNo" checked /> Entregar em outro endereço
</label>


<div id="div_entrega_outro" style="display: none">
  bla bla bla
</div>

This seems to work.

$('.div_entrega_outro').hide();
$("input[name='outro_endereco_entrega']").click(function() {
  if ($(this).val() === 'N') {
    $('.div_entrega_outro').show();
  } else {
    $('.div_entrega_outro').hide();
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="outro_endereco_entrega" id="entrega_mesmo" type="radio" value="N"> <label for="InputName">Entregar no endereço de cadastro</label><br>
<input name="outro_endereco_entrega" id="entrega_outro" type="radio" value="S"> <label for="InputName">Entregar em outro endereço</label>

<div class="div_entrega_outro">
  bla bla bla
</div>