javascript - jQuery 将类添加到具有特定标签的选定单选按钮

Question

我目前使用 jQuery 在选择单选按钮时添加/删除类。问题是它检查所有单选按钮，因此它只将 css 添加到 1 个单选按钮。

但在我的 HTML 中，我使用一行 3 或 5 列，其中类只能添加到 3/5 列中的 1 列。但也应该允许在下一行中将类添加到 1 个单选按钮(如果选中)。

我怎样才能实现这一目标？

jQuery:

<script>
jQuery(".checkbox-radio").change(function() {
  $(".option").removeClass("selected");
  if ($(this).is(':checked')){
    $(this).closest(".option").addClass("selected");
  }
  else
    $(this).closest(".option").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

如果我对您问题的理解是正确的，则您的脚本的问题在于以下行:

 $(".option").removeClass("selected");

在单选按钮选择中，页面上的每个“选项”标记(无论列号如何)都将删除“选定”类。相反，您需要尝试类似以下的操作来将删除限制为仅选定的行(通过查找选定复选框的最接近的父 div/行):

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

示例:http://codepen.io/JasonGraham/pen/zBvwOK

这意味着每一行在任何给定时间都可以有一个带有“选定”类的选项标签。