Question

我有以下HTML

<fieldset>
  <legend>
     <input type="checkbox" class="myCheck">Click
  </legend>
  content
<fieldset>

我正在尝试在选中复选框时添加类，并在未选中时删除。不应该这样的工作：

$(".myCheck").change(function() {           
    if ($(this).is(':checked')){
        $(this).parent("fieldset").addClass("myClass");
    } else {
        $(this).parent("fieldset").removeClass("myClass");
    }
});

我错过了什么？

Answer 1

.parent()仅向上移动一级。但是根据HTML，你有fieldset是两个级别。使用父母或最亲近的人。

即：

$(".myCheck").change(function() {                
    if ($(this).is(':checked')){         
        $(this).closest("fieldset").addClass("myClass");     
        } else {         
        $(this).closest("fieldset").removeClass("myClass");     
    } 
});

或

$(".myCheck").change(function() {                
    if ($(this).is(':checked')){         
        $(this).parents("fieldset").addClass("myClass");     
        } else {         
        $(this).parents("fieldset").removeClass("myClass");     
    } 
});

Answer 2

在这种情况下，

.parent()将为您提供直接父级<legend/>您可以.parent().parent("fieldset")或使用.parents("fieldset")，但这会为您提供{{{}的任何父级1}}匹配$(this)

将它们组合在一起你会有这样的事情：

<fieldset/>

或

  $(this).parent().parent("fieldset").addClass("myClass");

您也可以使用$(this).parents("fieldset").first().addClass("myClass");

.toggleClass( className, switch )

<强> Code example on jsfiddle

Answer 3

试试这个：

$('.myCheck').click(function() {
   $(this).closest('fieldset').toggleClass('myClass', $(this).is(':checked'));
});

AddClass需要jQuery目标帮助

3 个答案: