javascript - jQuery:如何突出显示选中的单选按钮块

我有以下代码，我想添加/删除类到<span class " ui-message ui-state-highlight">到选中的单选按钮以突出显示选中的行。
我该怎么做？

这是我下面的html和JS

$(document).ready(function(){
        $('#loan_origination_application input').on('change', function() {
           $('input[name=address]:checked', '#loan_origination_application').addClass("ui-message ui-state-highlight");
           alert($('input[name=address]:checked', '#loan_origination_application').val());
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional address-b">
    <label class="radio_buttons optional control-label">Your addresses</label>
        <span class="radio ui-message ui-state-highlight">
        <br />
    <label for="user_address1 ">
    <input class="radio_buttons optional" id="user_address1" name="address" type="radio" value="addres1" checked><strong>Sally Smith</strong> 3  Plaza, Luiville, Az 932973, United States <a href="#">Edit</a>
    <br />
    </label>
                    </span>
                    <span class="radio">
                        <label for="user_address2">
                            <input class="radio_buttons optional" id="user_address2" name="address" type="radio" value="address2"><strong>Sally Smith</strong> 123 Smith St, Boyton Beach, FL 08801, United States <a href="#">Edit</a>
                        </label>
                    </span>

                    <p class="help-block"><a href="#"> Add new address</a></p>
                </div>

最佳答案

尝试这个：

var $buttons = $('.form-group.radio_buttons'),
    $wrappers = $buttons.find('.radio'),
    $inputs = $buttons.find('input[name="address"]');

$inputs.on('change', function() {
  var $input = $(this),
      $wrapper = $input.closest('.radio'),
      isChecked = $input.is(':checked');

  $wrappers.removeClass('ui-message ui-state-highlight');

  if (isChecked) {
    $wrapper.addClass('ui-message ui-state-highlight');
  } else {
    $wrapper.removeClass('ui-message ui-state-highlight');
  }
});

.ui-message.ui-state-highlight {
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional address-b">
  <label class="radio_buttons optional control-label">Your addresses</label>
  <span class="radio">
                    <label for="user_address1 ">
                        <input class="radio_buttons optional" id="user_address1" name="address" type="radio" value="addres1"><strong>Sally Smith</strong> 3  Plaza, Luiville, Az 932973, United States <a href="#">Edit</a>
                    </label>
                </span>
  <span class="radio">
                    <label for="user_address2">
                        <input class="radio_buttons optional" id="user_address2" name="address" type="radio" value="address2"><strong>Sally Smith</strong> 123 Smith St, Boyton Beach, FL 08801, United States <a href="#">Edit</a>
                    </label>
                </span>

  <p class="help-block"><a href="#"> Add new address</a></p>
</div>