ラジオボタンがチェックされている場合は要素を隠す

Question

ラジオボタンoption--inputの1つがチェックされている場合、親要素variant--groupを非表示にするにはどうすればよいですか？

これは、ページロードと入力変更で有効です。 jQueryので

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

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

Answer 1

：

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

Answer 2

は、容器を識別し、非表示にするjQueryの機能.parents()を使用

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

Answer 3

最も近いバリアントグループを隠します。

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