ラジオボタンをチェックすると、背景色を変更して、チェックが外れると元に戻したい

Question

<ul class="table-1">
                                            <li>
                                                <div class="table-1-left"><input type="radio" name="table1"><label class="table_txt-blue radio">テキスト1</label></div>
                                            </li>
                                            <li>
                                                <div class="table-1-left"><input type="radio" name="table1"><label class="table_txt-blue radio">テキスト２</label></div>
                                            </li>                                           
                                        </ul>
<ul class="table-2">
                                            <li>
                                                <div class="table-2-left"><input type="radio" name="table2"><label class="table_txt-blue radio">テキスト3</label></div>
                                            </li>
                                            <li>
                                                <div class="table-2-left"><input type="radio" name="table2"><label class="table_txt-blue radio">テキスト4</label></div>
                                            </li>                                           
                                        </ul>

$(function() {
    var $trList = $("li:has(input)"); //liでinputタグをもつものを取得
    $trList.each(function() { //取得したliタグそれぞれに処理を行う
        var $input = $(this).find("input");
        var $checkbox = $(this).find('input[type=checkbox]'); //checkboxを取得
        $(this).click(function() {
            if ($checkbox.prop('checked')) { //checkboxにcheckedがすでにある場合
                $checkbox.prop('checked', ''); //checkedを外す

            } else {
                $input.prop('checked', 'checked'); //それ以外はchecked付与
              $trList.closest('li').removeClass('bc_checked'); //$trListのbc_checkedを外す
               $input.closest('li').addClass('bc_checked'); //それ以外はbc_checked付与
            }
        });
    });
});

ラジオボタンのデザインを変更しているため、クリックでcheckedが付与されるようにいsています。
加えて、チェックしたliにクラスを追加して背景色を変更して、他のラジオボタンがチェックされてcheckedが外れたらクラスを削除して背景色を元に戻したいのですが、現在の仕組みだとtable-1、table-2の両方でクラスが外れてしまいます。

これを同じname属性ないだけで動作するようにしたいのですが・・・

Answer 1

最後の
$("input:not(':checked')").closest('li').removeClass('bc_checked');
を追記でいけました。

$(function() {
    var $trList = $("li:has(input)"); //liでinputタグをもつものを取得
    $trList.each(function() { //取得したliタグそれぞれに処理を行う
        var $input = $(this).find("input");
        var $checkbox = $(this).find('input[type=checkbox]'); //checkboxを取得
        var $bc_checked = $(this).find('bc_checked'); //bc_checkedを取得
        $(this).click(function() {
            if ($checkbox.prop('checked')) { //checkboxにcheckedがすでにある場合
                $checkbox.prop('checked', false); //checkedを外す
            } else {
                $input.prop('checked', true); //それ以外はchecked付与
                $input.closest('li').addClass('bc_checked'); //checked付与
            }
            $("input:not(':checked')").closest('li').removeClass('bc_checked');//checkedがないliのbc_checkedクラスを削除
        });
    });
});

Answer 2

.red{background-Color:red;}

$(function(){
  $('[type=radio]').on('change',function(){
    $('[type=radio]').each(function(){
      $(this).parents('li').toggleClass('red',$(this).prop('checked'));
    });
  });
});