代码之家 › 专栏 › 技术社区 › Kyle Underhill

选中时隐藏/显示div(带删除)

jquery javascript

Kyle Underhill · 技术社区 · 7 年前

我只是想表现出 .clear div如果 input

如何更改功能,以便在从收音机中删除选中状态时按钮是隐藏的吗?

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

2 回复 | 直到 7 年前

sjahan 7 年前

很简单,为什么不重新设置为 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">

Taplar 7 年前

您只需在更改时显示“清除”,然后在单击时将其隐藏。要使收音机“更改”,必须选择其中一个值。当你清除它时,你知道它需要隐藏。逻辑值更改不会触发事件,因此当您在清除中取消选中它们时,不会触发“更改”事件。

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