如何在选中或取消选中复选框时删除或添加类？

Question

期望的行为

在更改复选框的选中状态时，我想删除或添加一个类。

我有使逻辑正常工作的功能，但是在遍历和定位特定的li 并进行样式更改时遇到了麻烦。

HTML

<div class="one">
    <div class="two">
        <p>31</p>
        <div class="three">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" class="css-checkbox" id="checkboxG1" name="checkboxG1">
                            <label class="css-label" for="checkboxG1">area_01 - click me</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="four">
        <ul>
            <li class="area_01 common"></li>
            <li class="area_02 common"></li>
            <li class="area_03 common"></li>
            <li class="area_04 common"></li>
            <li class="area_05 common"></li>
            <li class="area_06 common"></li>
        </ul>
    </div>
</div>

jQuery

以下是我在使用next() 进行一系列失败尝试后的最后一次尝试。

我要么搞砸了我的遍历，要么我没有正确使用removeClass()。

$("input.css-checkbox:checkbox").change(function () {
    if (this.checked) {
        // remove a class
        //var myVar = $(this).next($("li.area_01"));
        var myVar = $(this).parent().parent().parent().find(".four").find("li.area_01");
        myVar.removeClass("common");
    } else if (!this.checked) {
        // add a class
        var myVar = $(this).parent().parent().parent().find(".four").find("li.area_01");
        myVar.addClass("common");
    }
});

jsFiddle

http://jsfiddle.net/rwone/fns87knc/

更新：我应该补充一点，将有许多具有相同类的列表，因此我需要专门针对“我单击的此类的下一个实例”。

Answer 1

你可以在使用parents() 遍历到div.one 后使用find() 方法。 但是这种方式有点慢。

$("input.css-checkbox:checkbox").change(function() {
  if (this.checked) {
    // remove a class
    //var myVar = $(this).next($("li.area_01"));
    var myVar = $(this).parents(".one").find(".four").find("li.area_01");
    myVar.removeClass("common");
  } else if (!this.checked) {
    // add a class
    var myVar = $(this).parents(".one").find(".four").find("li.area_01");
    myVar.addClass("common");
  }
});

/* 

Desired Behaviour

On checking the checkbox, the first li's background should change to green.  

On unchecking the checkbox, the first li's background should change back to grey.  

*/

.area_01,
.area_02,
.area_03,
.area_04,
.area_05,
.area_06 {
  width: 100px;
  height: 20px;
}
.area_01 {
  background: green;
}
.area_02 {
  background: cyan;
}
.area_03 {
  background: yellow;
}
.area_04 {
  background: fuchsia;
}
.area_05 {
  background: purple;
}
.area_06 {
  background: lime;
}
li {
  margin-bottom: 5px;
}
.area_01.common,
.area_02.common,
.area_03.common,
.area_04.common,
.area_05.common,
.area_06.common {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="one">
  <div class="two">
    <p>31</p>
    <div class="three">
      <table>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="css-checkbox" id="checkboxG1" name="checkboxG1">
              <label class="css-label" for="checkboxG1">area_01 - click me</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="four">
    <ul>
      <li class="area_01 common"></li>
      <li class="area_02 common"></li>
      <li class="area_03 common"></li>
      <li class="area_04 common"></li>
      <li class="area_05 common"></li>
      <li class="area_06 common"></li>
    </ul>
  </div>
</div>

Answer 2

DEMO

$("input.css-checkbox:checkbox").change(function () {
    if (this.checked) {
        console.log('checked');
        // remove a class
        //var myVar = $(this).next($("li.area_01"));
        var myVar = $(this).closest(".two").siblings('.four').find(".area_01");
        myVar.removeClass("common");
    } else if (!this.checked) {
        // add a class
        var myVar = $(this).closest(".two").siblings('.four').find(".area_01");
        myVar.addClass("common");
    }
});

/* 

Desired Behaviour

On checking the checkbox, the first li's background should change to green.  

On unchecking the checkbox, the first li's background should change back to grey.  

*/

像这样试试。

我使用closest() 选择了第二类的父div，然后使用siblings() 找到包含第四类列表的兄弟，然后添加/删除该类

Answer 3

如果你想给li元素添加一个类，可以使用以下步骤

1.将以下代码添加到JS文件中。如果选中复选框，此代码将向li元素添加'common'类，否则将删除该类。

jQuery("input.css-checkbox:checkbox").change(function () {
        if (this.checked) {
            jQuery('.four ul li').addClass('common');
        }
        else
        {
           jQuery('.four ul li').removeClass('common');
        }
    });

2.在您的 CSS 文件中编写以下语句。

.common{
    background: red;
}

1. 完成此操作后，从 li 元素中删除“common”类，因为我们将动态添加或删除它。

要查看此示例，请参考此链接-http://jsfiddle.net/r4zokodb/