選択したラジオボタンの周りにdivクラスをハイライト表示しますか？

Question

1つのラジオボタンがチェックされている場合、どのjQuery関数が1つのdiv.card要素にクラスを追加しますか？
1つのすでに確認要素が常に強調表示されますので、それは

<div class="col-lg-6 form-check"> 
    <div class="card"> 
     <h3 class="card-header">Headline<small class="text-muted">Subline</small></h3> 
     <label class="form-check-label"> 
      <img class="card-img-left" src="{{ asset('img/image.png') }}"> 
      <div class="card-block"> 
       <p class="card-text">Desciption</p> 
      </div> 
      <input class="hidden-xs-up" type="radio" name="character" value="1" checked> 
     </label> 
    </div> 
</div> 

Answer 1

:-)あなたがチェックの親であるすべての.cardの要素を見つけることができ、クリックについて（ページロード後の例）ではありませんラジオボタンclosestを使用してください。ドキュメントとして

$('input[type="radio"]:checked').closest('.card').addClass('checked') 

氏は述べています：セット内の各要素について

を、要素自体をテストし、DOMツリー内のその先祖を通って上に横断することにより、セレクタに一致する最初の要素を取得します。

ここでは、少し簡略化したデモです。もちろん

$('input[type="radio"]:checked').closest('.card').addClass('checked')

.card { 
 
    background: grey; 
 
} 
 

 
.card.checked { 
 
    background: red; 
 
}

<div class="card"> 
 
    <label><input type="radio" name="character">Character 1</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character">Character 2</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character" checked>Character 3</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character">Character 4</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character">Character 5</label> 
 
</div> 
 

 
<script src="http://code.jquery.com/jquery-2.2.4.min.js" 
 
\t \t \t integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
\t \t \t crossorigin="anonymous"></script>

、あなたはまだときのチェックボックスの状態が変化し、そのクラスを更新する必要があります。この簡略化されたデモは、それがどのように行われるかを示しています

// set initial state 
 
var $checked = $('input[type="radio"]:checked'); 
 
$checked.closest('.card').addClass('checked'); 
 

 
// update on change 
 
$('input[type="radio"]').change(function() { 
 
    $checked.prop('checked', false).closest('.card').removeClass('checked'); 
 
    $checked = $(this); 
 
    $checked.closest('.card').addClass('checked'); 
 
});

.card { 
 
    background: grey; 
 
} 
 

 
.card.checked { 
 
    background: red; 
 
}

<div class="card"> 
 
    <label><input type="radio" name="character">Character 1</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character">Character 2</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character" checked>Character 3</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character">Character 4</label> 
 
</div> 
 
<div class="card"> 
 
    <label><input type="radio" name="character">Character 5</label> 
 
</div> 
 

 
<script src="http://code.jquery.com/jquery-2.2.4.min.js" 
 
\t \t \t integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
\t \t \t crossorigin="anonymous"></script>

Answer 2

ただ、ボックスがチェックされているかどうかを確認して.addClassを（使用）ので、のような：

if($('input[type="radio"]').is(':checked')) { 
    $(this).closest('.card').addClass('selected'); 
};