html
1<ul class="table-1"> 2 <li> 3 <div class="table-1-left"><input type="radio" name="table1"><label class="table_txt-blue radio">テキスト1</label></div> 4 </li> 5 <li> 6 <div class="table-1-left"><input type="radio" name="table1"><label class="table_txt-blue radio">テキスト2</label></div> 7 </li> 8 </ul> 9<ul class="table-2"> 10 <li> 11 <div class="table-2-left"><input type="radio" name="table2"><label class="table_txt-blue radio">テキスト3</label></div> 12 </li> 13 <li> 14 <div class="table-2-left"><input type="radio" name="table2"><label class="table_txt-blue radio">テキスト4</label></div> 15 </li> 16 </ul>
javasxcript
1$(function() { 2 var $trList = $("li:has(input)"); //liでinputタグをもつものを取得 3 $trList.each(function() { //取得したliタグそれぞれに処理を行う 4 var $input = $(this).find("input"); 5 var $checkbox = $(this).find('input[type=checkbox]'); //checkboxを取得 6 $(this).click(function() { 7 if ($checkbox.prop('checked')) { //checkboxにcheckedがすでにある場合 8 $checkbox.prop('checked', ''); //checkedを外す 9 10 } else { 11 $input.prop('checked', 'checked'); //それ以外はchecked付与 12 $trList.closest('li').removeClass('bc_checked'); //$trListのbc_checkedを外す 13 $input.closest('li').addClass('bc_checked'); //それ以外はbc_checked付与 14 } 15 }); 16 }); 17});
ラジオボタンのデザインを変更しているため、クリックでcheckedが付与されるようにいsています。
加えて、チェックしたliにクラスを追加して背景色を変更して、他のラジオボタンがチェックされてcheckedが外れたらクラスを削除して背景色を元に戻したいのですが、現在の仕組みだとtable-1、table-2の両方でクラスが外れてしまいます。
これを同じname属性ないだけで動作するようにしたいのですが・・・
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。