radioボタンにcheckが付いていたらlabelにclassを追加

イシュー

• チェックボックスのスタイルをチェックされた時に変更したい場合によくやるやつ（？）
• AngularJSの ng-class による実装がすっきり書けるのでメモ

参考

• angularjs - Set class to checked radio-button in angular? - Stack Overflow
• AngularJSのng-classを使いこなそう - AngularJS Ninja
• checkbox, radio にチェックがあったら label に class を付ける - jsdo.it - Share JavaScript, HTML5 and CSS
  • jQueryによる実装（parentの処理をしなきゃいけないのがうっとうしいよね）

jQuery

html

<label><input type="radio" name="rdo_partition" value="操作方法" />操作方法</label>
<label><input type="radio" name="rdo_partition" value="不具合"/>不具合</label>
<label><input type="radio" name="rdo_partition" value="要望"/>要望</label>
<label><input type="radio" name="rdo_partition" value="その他"/>その他</label>

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");
    }
  });      
});

AngularJS

• ng-class を使って、"selected" というclass名をlabelに設定している
• data.type には、radioボタンのvalue値が入る。
• valueはng-repeat で渡せるから実際にはもっとすっきりする。

html(angularJS)

<label ng-class="{ selected: (data.type == '操作方法') }"><input type="radio" name="rdo_partition" ng-model="data.type" value="操作方法" />操作方法</label>
<label ng-class="{ selected: (data.type == '不具合') }"><input type="radio" name="rdo_partition" ng-model="data.type" value="不具合"/>不具合</label>
<label ng-class="{ selected: (data.type == '要望') }"><input type="radio" name="rdo_partition" ng-model="data.type" value="要望"/>要望</label>
<label ng-class="{ selected: (data.type == 'その他') }"><input type="radio" name="rdo_partition" ng-model="data.type" value="その他"/>その他</label>