Question

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

<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 code：

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

从我看到更改事件没有启动，我也尝试了点击事件，但也没有任何成功，我也注意到当我检查单选按钮时没有添加检查属性但是.is（' ：checked'）返回true

Answer 1

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

PS：您的检查语法有效但有时无法正常工作

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

Answer 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>

Answer 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/

Answer 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>

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

4 个答案: