jquery单选按钮更改事件不起作用答案

【问题标题】：jquery radio button change event not workingjquery单选按钮更改事件不起作用
【发布时间】：2017-11-15 12:44:51
【问题描述】：

我想在选中特定单选按钮时显示一些表单，并在用户选择其他单选按钮时隐藏它

<div class="col-sm-6" id="addresses">
  <input type="radio" name="deco_request[address]" value="value[&quot;id&quot;]"> Some address<br>
  <input type="radio" name="deco_request[address]" value="other" id="other-address"> Other Address<br>
</div>

js代码：

$("#other-address").on("change", function() {
  if ($("#other-address").is(':checked')) {
    return $("#new-address").show();
  } else {
    return $("#new-address").hide();
  }
});

从我看到的更改事件没有触发，我也尝试了点击事件但也没有成功，我也注意到当我检查单选按钮时没有添加检查的属性但是 .is(' :checked') 返回真

【问题讨论】：

您的代码，就被调用的事件而言，它正在工作，我在 jsfiddle 中尝试了它，为 if - else 添加了一些警报。确保将 jQuery 添加到代码中
jquery 已添加，我在此页面上还有一些其他 jquery 代码可以正常工作
事件正在被调用，你可以检查它添加一个alert()

标签： javascript jquery html

【解决方案1】：

您不需要return 并使用prop 来检查

PS：你的检查语法是有效的，但有时不能正常工作

$("#other-address").on("change", function() {
  if ($("#other-address").prop("checked", true)) {
     $("#new-address").show();
  } else {
     $("#new-address").hide();
  }
});

【讨论】：

【解决方案2】：

试试这段代码

$("input[name='deco_request[address]']").change(function() {
  $("#new-address").toggle();
});

$("input[name='deco_request[address]']").change(function() {
  $("#new-address").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6" id="addresses">
  <input type="radio" name="deco_request[address]" value="value[&quot;id&quot;]"> Some address<br>
  <input type="radio" name="deco_request[address]" value="other" id="other-address"> Other Address<br>
</div>

<div id="new-address">Address</div>

【讨论】：

这适用于两个输入，但在我的情况下，输入将是动态生成的，在某些情况下它可能只有一个或很多
那么你如何定义哪个是隐藏哪个是显示
它应该只在检查其他地址时显示，无论如何，如果我要检查是否在更改事件中检查了其他地址，你的解决方案必须工作，但不幸的是它对我不起作用，我只是让更改事件并在其中放置一个console.log，但它没有显示

【解决方案3】：

换个方式

$("#addresses input").on("change", function() {
  if ($("#other-address").is(':checked')) {
    return $("#new-address").show();
  } else {
    return $("#new-address").hide();
  }
});

https://jsfiddle.net/6d0zydjj/1/

【讨论】：

【解决方案4】：

使用它你可以解决你的问题

$('.radio').change(function(){
        if ($("#other-address").is(':checked')) {
          $("#new-address").show();
        } else {
          $("#new-address").hide();
          }
    });

$('.radio').change(function(){
        if ($("#other-address").is(':checked')) {
          $("#new-address").show();
        } else {
          $("#new-address").hide();
          }
    });

#new-address{
display:none;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-6" id="addresses">
  <input type="radio" class="radio" name="deco_request[address]" value="value[&quot;id&quot;]"> Some address<br>
  <input type="radio" class="radio" name="deco_request[address]" value="other" id="other-address"> Other Address<br>
</div>

<div id="new-address">
Hi
</div>

【讨论】：