Question

如果选中其中一个单选按钮variant--group，如何隐藏父元素option--input？

这应该适用于页面加载和输入更改。

＆＃13;

.variant--group.is--disabled{
  display: none;
}

＆＃13;

<div class="variant--group">
<h3 class="variant--name">Format</h3>
<div class="variant--option">
<input type="radio" class="option--input" id="radio1" name="radio" value="">
<label for="radio1">radio1</label>
</div>
<div class="variant--option">
<input type="radio" class="option--input" id="radio2" name="radio" value="">
<label for="radio2">radio2</label>
</div>
</div>

＆＃13;

Answer 1

隐藏最近的变体组

$("input[name= radio]:radio").change(function() {
    $(this).closest(".variant--group").hide();
});

Answer 2

使用jQuery函数.parents()来识别和隐藏容器。

$(function() {
  $('.option--input').change(function() {
    if ($(this).is(':checked')) {
      $(this).parents('.variant--group').hide();
    }
    // not checked
  });
});

.variant--group.is--disabled {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="variant--group">
  <h3 class="variant--name">Format</h3>
  <div class="variant--option">
    <input type="radio" class="option--input" id="radio1" name="radio" value="">
    <label for="radio1">radio1</label>
  </div>
  <div class="variant--option">
    <input type="radio" class="option--input" id="radio2" name="radio" value="">
    <label for="radio2">radio2</label>
  </div>
</div>

如果选中单选按钮，则隐藏元素

2 个答案: