javascript - 如果选中则隐藏/显示 div(删除)

Question

如果 input 被选中，我试图只显示 .clear div，否则隐藏。

如何更改功能，以便在我从 radio 中删除选中状态时隐藏 .clear 按钮？

$('input[name="example"]').on("change", function(e) {
  if ($(this).prop('checked', true)) {
    $(".clear")
      .css("visibility", "visible");
  } else {
    $(".clear")
      .css("visibility", "hidden");
  }
});
$('.clear').on('click', function() {
  $('input[name="example"]').prop('checked', false);
});

.clear {
  visibility: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clear">
  clear</div>
<input type="radio" name="example" value="no">
<input type="radio" name="example" value="yes">

Answer 1

很简单，为什么不在点击.clear时重置为hidden可见性？

更改监听器监听用户交互，因此以编程方式删除 checked 属性不会触发它!

$('input[name="example"]').on("change", function() {
  $(".clear").css("visibility", $(this).prop('checked') ? "visible" : "hidden");
});
$('.clear').on('click', function() {
  $('input[name="example"]').prop('checked', false);
  $(".clear").css("visibility", "hidden");
});

.clear {
  visibility: hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clear">
  clear</div>
<input type="radio" name="example" value="no">
<input type="radio" name="example" value="yes">