Question

我有一个输入标签，之前我有一个span标签。

<li>
<span class="class1 class2" style="background-position: 0pt 0pt;"></span>
<input id="in1" class="inputclass" type="checkbox" name="in1">
<label for="in1">text here</label>
</li>
<li>
<span class="class1 class2" style="background-position: 0pt 0pt;"></span> 
<input id="in2" class="inputclass" type="checkbox" name="in2">
<label for="in2">text2 here</label>
</li>

当选中复选框即in1时，我需要从上面的第二个span标签中删除class2。我怎么能这样做？

还有许多输入和跨度标签。请帮忙。

谢谢

Answer 1

你可以用这个：

$('.inputclass:checkbox').on('change', function() {
    $(this)
        .parent() // li tag
        .next() // adjacent li tag
        .children('span')
        .toggleClass('class2', !this.checked);
});

更改后，它会在下一个<span>＆gt;内找到<li元素并根据是否使用.class2点击.toggleClass()类切换$(document).on('change', '.inputclass:checkbox', function() { ... });类。

如果选择框动态添加到文档中，您可以使用如下事件委派：

document

在可能的情况下，将{{1}}更改为所有复选框中最接近祖先的元素。

Answer 2

$("#in1").change(
  function() {
    if ($(this).is(":checked")) {
      $(this).prev().removeClass("class2");
    }
  }
);

Answer 3

$(".inputclass").change(
  function() {
    if (!($(this).is(":checked"))) {
      $(this).parent().childern(".class2").removeClass("class2");
    }
  }
);

Answer 4

$("li input:checkbox").click(function() {
   $(this).parent().next().find('span').removeClass('class2');
});

Jquery删除span对象的类而不传递Id

4 个答案: