使用特定标签检查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');

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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");
}).change();//manually call change event here

.selected{color:red}

<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>

1. 使用.change()或.trigger('change')手动调用更改事件。

Answer 3

您应该在页面加载时trigger(eventType)更改事件。

  

执行附加到给定事件类型的匹配元素的所有处理程序和行为。

jQuery(".checkbox-radio").change(function() {
    //Existing code
}).trigger('change'); //Fire the event on page load

.change()也可以用作.trigger( "change" )

的简写

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");
}).trigger('change'); //Fire the change event

.selected {
  color: red
}

<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>