Question

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

如何更改功能，以便在从收音机中删除选中的状态后，.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

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

更改侦听器侦听用户交互，因此以编程方式删除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">

Answer 2

您可以只显示更改后的清除，并在单击时将其隐藏。为了使收音机“改变”，必须选择其中一个值。当您清除它时，您知道它需要隐藏。逻辑值更改不会触发任何事件，因此，当您取消选中它们时，不会触发“更改”事件。

var $examples = $('input[name="example"]');
var $clear = $('.clear');

$examples.on("change", function(){
  $clear.css('visibility', 'visible');
});

$clear.on('click', function() {
  $examples.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">

隐藏/显示div（如果选中）（带删除）

2 个答案: