thisを使ってID名やClass名を拾得

2018.08.07

thisを使用すれば
ラジオボタンにはそれぞれID名が降られており、押したラジオボタンのID名を判別して、
表示させる内容を変更するといったことが可能です。

例えば、複数あるボタンを押したとき、個別に対応したメニューをそれぞ入れ表示させたり、
フォームを条件分岐でユーザーに登録させる内容を変更したいなどです。

下記の例では、3つのラジオボタンに対して表示させるメニュー内容を変更するサンプルです。

<p>    
    <input type="radio" name="contact" id="contact_01">一般
    <input type="radio" name="contact" id="contact_02">法人
    <input type="radio" name="contact" id="contact_03">それ以外
</p>

<div id="menu_01">
メニュー1の内容
</div>

<div id="menu_02">
メニュー2の内容
</div>

<div id="menu_03">
メニュー3の内容
</div>

<p>

<input type="radio" name="contact" id="contact_01">一般

<input type="radio" name="contact" id="contact_02">法人

<input type="radio" name="contact" id="contact_03">それ以外

</p>

メニュー1の内容

</div>

メニュー2の内容

</div>

メニュー3の内容

</div>

$('input').click(function() {
  var val = $(this).attr('id');
  // ID名に対し、表示する内容を設定する。
  if(val == "contact_01"){
    $('menu_01').show(); 
    $('menu_02').hide(); 
    $('menu_03').hide(); 
  }else if(val == "contact_02"){
    $('menu_01').hide();
    $('menu_02').show(); 
    $('menu_03').hide(); 
  }else if(val == "contact_03"){
    $('menu_01).hide();
    $('menu_02').hide(); 
    $('menu_03').show();  
  }
});