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");

在单选按钮选择中，每个＆＃34;选项＆＃34;页面上的标签（无论列号如何）都会选择＆＃34;＆＃34;课程已删除。相反，您只想尝试以下内容来限制删除到所选行（仅通过查找所选复选框的最近父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

这意味着每行可以有一个选项标签，其中包含＆＃34;选择＆＃34;在任何给定的时间上课。

Answer 2

我改变了你的代码。您需要检查div父级，而不是span

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

https://jsfiddle.net/8f5gzgax/3/

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

2 个答案: