Javascript 单击标签将类添加到上一个div，但不起作用

我试图在单击div后面的标签时，将一个类添加到div（.checkbox）。但它似乎根本不起作用，我也不知道为什么

下面是我设置的javascript和基本表单布局

JS

$('#filter ul label').click(function() {

    if ($(this).prev('.checkbox').hasClass('checked')) {
      $(this).prev('.checkbox').removeClass('checked');
    } else {
      $(this).prev('.checkbox').addClass('checked');
    }

});

HTML

      <form id="filter">
        <div>
          <a href="#">Service <span>&#xE805;</span></a>
          <ul>
            <li>
              <div class="checkbox"></div>
              <label for="new-build">
                <input type="checkbox" name="new-build" id="new-build">
                New Build
              </label>
            </li>
            <li>
              <div class="checkbox"></div>
              <label for="extensions">
                <input type="checkbox" name="extensions" id="extensions">
                Extensions
              </label>
            </li>
            <li>
              <div class="checkbox"></div>
              <label for="refurbishments">
                <input type="checkbox" name="refurbishments" id="refurbishments">
                Refurbishments
              </label>
            </li>
            <li>
              <div class="checkbox"></div>
              <label for="fit-out">
                <input type="checkbox" name="fit-out" id="fit-out">
                Fit Out
              </label>
            </li>
            <li>
              <div class="checkbox"></div>
              <label for="maintenance">
                <input type="checkbox" name="maintenance" id="maintenance">
                Maintenance
              </label>
            </li>
            <li>
              <div class="checkbox"></div>
              <label for="design-build">
                <input type="checkbox" name="design-build" id="design-build">
                Design &amp; Build
              </label>
            </li>
            <li>
              <div class="checkbox"></div>
              <label for="listed-building">
                <input type="checkbox" name="listed-building" id="listed-building">
                Fit Out
              </label>
            </li>
          </ul>
        </div>
        <input type="submit">
      </form>

新建


扩展


翻新


装备


维修


设计及；建造


装备

任何帮助都将不胜感激，我想这是我完全错过的一件非常简单的事情

---

多谢各位

您的解决方案非常有效。请确保包含jQuery并将javascript放入

$(document).ready(function() {

});

街区

---

在编写标记时，似乎没有像您那样触发

单击

事件。您可以将函数绑定到复选框的

change

事件。这应该如预期的那样起作用：

$('#filter input[type=checkbox]').change(function() {
    var $div = $(this).parent().prev('.checkbox');
    if ($div.hasClass('checked')) {
      $div.removeClass('checked');
    } else {
      $div.addClass('checked');
    }
});

---

检查小提琴演示：

您的解决方案工作得非常好。请确保包含jQuery并将javascript放入

$(document).ready(function() {

});

街区

---

在编写标记时，似乎没有像您那样触发

单击

事件。您可以将函数绑定到复选框的

change

事件。这应该如预期的那样起作用：

$('#filter input[type=checkbox]').change(function() {
    var $div = $(this).parent().prev('.checkbox');
    if ($div.hasClass('checked')) {
      $div.removeClass('checked');
    } else {
      $div.addClass('checked');
    }
});

检查小提琴演示：

这对我来说很有效：

 $('#filter ul label').click(function() {
     var $cb = $(this).prev('.checkbox');
     $cb.toggleClass('checked', !$cb.hasClass('checked'));
 });

工作

JS应该位于HTML下方，或者包装在document.ready中

$(function(){
    // your JS here
});

这对我很有用：

 $('#filter ul label').click(function() {
     var $cb = $(this).prev('.checkbox');
     $cb.toggleClass('checked', !$cb.hasClass('checked'));
 });

工作

JS应该位于HTML下方，或者包装在document.ready中

$(function(){
    // your JS here
});

---

我想你对代码的顺序有问题。在执行JavaScript代码时，DOM元素不在那里，因为它们位于JS之后

将JS移到HTML后面或使用

jQuery（文档）。就绪（函数（）{…}）

construct（推荐）

---

我想您的代码顺序有问题。在执行JavaScript代码时，DOM元素不在那里，因为它们位于JS之后

将JS移到HTML后面或使用

jQuery（文档）。就绪（函数（）{…}）

construct（推荐）

---

---

.parent（）将选择标签的父元素，该标签是

元素。他想选择上一个。对不起，它在文档中。准备好了，我忘了包括这个。编辑不，这不是该死的！！！谢谢你的帮助help@Merguez但你的例子根本不起作用？单击标签不会将

checked

类添加到div元素中？是的，请检查此提琴：编辑：啊，单击标签就是问题所在，抱歉，我将对此进行调查。@Niklas感谢您指出问题，我更新了一个工作示例的答案。..parent（）将选择标签的父元素，它是

元素。他想选择上一个。对不起，它在文档中。准备好了，我忘了包括这个。编辑不，这不是该死的！！！谢谢你的帮助help@Merguez但你的例子根本不起作用？单击标签不会向div元素添加

checked

类？是的，请检查此提琴：编辑：啊哈，单击标签就是问题所在，抱歉，我将对此进行调查。@Niklas感谢您指出问题所在，我更新了一个工作示例的答案。到底什么不起作用？可以用更少的代码实现，下面是我的答案，到底什么不起作用？可以用更少的代码实现，下面是我的答案，我知道我忘记了什么。谢谢你的回复。顺便说一下。我认为您不希望根据该div的类名设置类，而是将其设置为复选框的选中状态。您的if语句应该检查checkbox元素的

“is:checked”

。实际上这是一个很好的调用，至少这样它会保持准确。谢谢。此外，您希望更改复选框的事件，而不是单击标签。您可以使用tab键聚焦复选框，并使用空格键切换复选框。只要使用时钟，你就会错过那个。我知道我忘了什么。谢谢你的回复。顺便说一下。我认为您不希望根据该div的类名设置类，而是将其设置为复选框的选中状态。您的if语句应该检查checkbox元素的

“is:checked”

。实际上这是一个很好的调用，至少这样它会保持准确。谢谢。此外，您希望更改复选框的事件，而不是单击标签。您可以使用tab键聚焦复选框，并使用空格键切换复选框。只要使用时钟，你就会错过那个。