【问题标题】:Jquery show / hide div onclick radiobutton - not working at allJquery 显示/隐藏 div onclick 单选按钮 - 根本不工作
【发布时间】:2017-07-27 22:19:07
【问题描述】:

我花了好几个小时,已经尝试了我在网上能找到的所有东西。没有任何效果!

作为标题,当我点击收音机时,我需要简单地显示/隐藏一个 div。我测试了用链接替换单选按钮并工作!但是没有单选按钮

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

按照铁木精提示,我做到了,但没有成功。我对 javascript 很不好 :-(

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

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

【问题讨论】:

  • 也许引导程序搞砸了?
  • 通过编辑,您仍然需要添加一个点击功能 - 类似$(document').on('click', '.iradio_square_green', function() {,然后在条件末尾添加一个else,以隐藏替代情况下的 div。
  • 伙计,我尝试了下面链接中的所有 3 个 javascript 代码,但没有。我认为逻辑是正确的。请看link

标签: javascript jquery


【解决方案1】:

似乎正在使用您的代码。我没有改变任何东西。也许您页面上的某些东西搞砸了?

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

【讨论】:

    【解决方案2】:

    你把 a 符号留给了你的 div

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

    我添加到你的js文件中

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

    【讨论】:

    • 不幸的是没有工作。如果我使用简单的链接而不是单选按钮,则可以正常工作...
    【解决方案3】:

    这似乎行得通。

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

    【讨论】:

    • 不幸的是没有工作。是否需要保留 $(document).ready(function() ?
    • 没有。如果在 click 函数中添加 console.log('clicked') 函数,你会得到什么吗?
    • 我在哪里买东西?在铬检查器中?显然什么都没发生
    • 所以点击没有被注册?单选按钮是动态添加的吗?试试$(document).on('click', 'input[name=outro_endereco_entrega]', function() {
    • 还是不行。如果没有$(document).ready(function() {,div 在页面加载中变得可见。这是页面测试:link1 / link2 / link3 - working without radio
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-08-05
    • 2018-02-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多