javascript - 如何在选中复选框时将类分配给 div

Question

我试图在选中复选框时将类分配给 div。目前我拥有的代码正在运行，但我有几个 div，当检查单个项目时，它会将类分配给所有 div。

js代码。

$("input[type='checkbox']").change(function(){       
if($(this).is(":checked")){
    $(".widget").addClass("services services-active"); 
}else{
    $(".widget").removeClass("services-active");  
}

});

html

     <div class="services widget" id="div1">
        <div class="name">Support1</div>
        <div class="cat">Test1</div>
        <div><input id="1" type="checkbox" name="1"/></div>
        </div>

     <div class="services widget" id="div2">
        <div class="name">Support2</div>
        <div class="cat">Test1</div>
        <div><input id="2" type="checkbox" name="2"/></div>
        </div>

如何将类分别分配给每个父 div？我需要为每个 div 编写 js 代码并使用 div id 还是可以在 js 代码中添加 .each 语句？

Answer 1

$("input[type='checkbox']").on('change', function(){       
    $(this).closest('.widget').addClass('services').toggleClass('services-active', this.checked);
});

FIDDLE

请注意，元素实际上已经具有 services 类，而您只是添加它，而不是删除它？
并且您需要实际关闭 HTML 中的那些输入