javascript - Jquery removing class of span object without passing the Id

Question

I have a input tag before which I have a span tag.

<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>

I need to remove the class2 from the 2nd span tag above when checkbox i.e in1 is checked. How can I do that?

Also there are many input and span tags. please help.

Thanks

Answer 1

你可以使用这个：

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

更改后，它会在 next > 中找到<span>元素，并根据是否单击它来<li切换类。.class2.toggleClass()

如果选择框被动态添加到文档中，您可以像这样使用事件委托：

$(document).on('change', '.inputclass:checkbox', function() { ... });

尽可能更改document为所有复选框中最接近祖先的元素。

Answer 2

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

Answer 3

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

Answer 4

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