Jquery显示/隐藏div onclick radiobutton - 根本不工作

时间:2017-07-27 01:35:51

标签: javascript jquery

我花了好几个小时,已经尝试了我能在网上找到的所有东西。什么都行不通!

作为标题,我需要在点击无线电时简单地显示/隐藏div。我测试用链接替换radiobutton并且工作了!但是对于radiobutton没有什么

的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

我想尝试的是:

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

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

链接测试:

link1 / link2 / link3 - working without radio

关于sideroxylon尖端,我做了,但没有成功。我用javascript非常糟糕: - (

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

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

3 个答案:

答案 0 :(得分:2)

似乎正在使用您的代码。我没有改变任何事情。也许你网页上的某些内容搞砸了?

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

$("input[id$='entrega_mesmo']").click(function() {
  $('.div_entrega_outro').hide();
});
&#13;
<script src="https://ajax.googleapis.com/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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你遗漏了一个符号给你div

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

我已添加到您的js文件

&#13;
&#13;
$(document).ready(function() {
  $("input[name='outro_endereco_entrega']").click(function() {
    if ($("#entrega_mesmoYes").is(":checked")) {
      $("#div_entrega_outro").show();
    } else {
      $("#div_entrega_outro").hide();
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这似乎有效。

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

相关问题