選択されたラジオボタンの親要素ラベルにクラスを追加する

by sachips

HTML

<form>
  <label>
    <input type="radio" name="season" valeu="春"> 春
  </label>
  <label class="selected">
    <input type="radio" name="season" valeu="夏" checked> 夏
  </label>
  <label>
    <input type="radio" name="season" valeu="秋"> 秋
  </label>
  <label>
    <input type="radio" name="season" valeu="冬"> 冬
  </label>
</form>

CSS

label {
  display: block;
  margin-bottom: 5px;
  padding: 8px;
  width: 80px;
}
label.selected {
  background-color: #ff6699;
}

JavaScript

$("input[type='radio']").change(function(){
  $("input[type='radio'][name='"+ $(this).attr("name")+ "']").each(function(){
    if($(this).is(":checked")){
      $(this).parent().addClass("selected");
    }else{
      $(this).parent().removeClass("selected");
    }
  });
});