javascript - 使用特定标签检查 jQuery 添加类到单选按钮

Question

我目前使用 jQuery 在选择单选按钮时添加/删除类。问题是默认情况下在页面加载时已经选中了单选按钮。但在这种情况下，仅在选择另一个单选按钮时才添加该类。

我怎样才能做到这一点，以便默认情况下该类已经添加到选中的单选按钮中？

jQuery:

<script>
jQuery(".checkbox-radio").change(function() {
  $(this).closest("div").find(".radio-inline").removeClass("selected");
  if ($(this).is(':checked')){
    $(this).closest(".radio-inline").addClass("selected");
  }
  else
    $(this).closest(".radio-inline").removeClass("selected");
});
</script>

HTML:

<span class="option">
      <label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="21" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text">Text</span>
        <span class="addon-price">Text</span>
        </label>
      </span>

<span class="option">
      <label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="22" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text">Text</span>
        <span class="addon-price">Text</span>
        </label>
      </span>

<span class="option">
      <label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="23" checked="checked" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text"> Text </span>
        <span class="addon-price">Text</span>
        </label>
      </span>



<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="17" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text"> Text </span>
        <span class="addon-price">Text</span>
        </label>
      </span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="1" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text"> Text </span>
        <span class="addon-price"> Text </span>
        </label>
      </span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="2" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text"> Text </span>
        <span class="addon-price"> Text </span>
        </label>
      </span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="3" checked="checked" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text"> Text </span>
        <span class="addon-price"> Text </span>
        </label>
      </span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="4" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
        <span class="addon-text"> Text </span>
        <span class="addon-price"> Text </span>
        </label>
      </span>

Answer 1

您可以使用.trigger('change')触发元素上的更改事件，并且事件处理程序将被执行。

在添加新类之前必须删除先前检查的元素的类。

jQuery('.checkbox-radio').change(function () {
    // Remove all classes first
    $('.radio-inline.selected').removeClass('selected');

    // Add class to the closest element of the selected radio
    $('.checkbox-radio:checked').closest('.radio-inline')
        .addClass('selected');
}).trigger('change');

jQuery(".checkbox-radio").change(function() {
  $('.selected').removeClass('selected');
  $(".checkbox-radio:checked").closest(".radio-inline")
    .addClass("selected");
}).trigger('change');

span.option {
  display: block;
}
.selected {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="option">
      <label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="21" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text">Text</span>
<span class="addon-price">Text</span>
</label>
</span>

<span class="option">
      <label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="22" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text">Text</span>
<span class="addon-price">Text</span>
</label>
</span>

<span class="option">
      <label class="radio-inline conf-option-5"><input type="radio" class="checkbox-radio" name="configoption[5]" value="23" checked="checked" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price">Text</span>
</label>
</span>



<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="17" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price">Text</span>
</label>
</span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="1" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="2" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="3" checked="checked" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>
<span class="option">
      <label class="radio-inline conf-option-1"><input type="radio" class="checkbox-radio" name="configoption[1]" value="4" onclick="prodconfrecalcsummary()">
        <i class="icon-addon"></i>
        <span class="addon-qty"></span>
<span class="addon-text"> Text </span>
<span class="addon-price"> Text </span>
</label>
</span>