Javascript 尝试将toggleclass与相同的类div一起使用

我正在尝试使用

Toggleclass

js

函数，如果选中复选框，则将活动类添加到服务类

div

。但我所做的一切都帮不了我

有人能给我一个想法吗

$(":checkbox").on('click', function(){
  $(this).parent().toggleClass("active");
});

我已经尝试过了，但是这个函数将活动添加到所有具有服务类的div中。我需要当我点击第二个标签时，它必须将活动类添加到services div

计算功能用于计算复选框值

var theTotal = parseFloat(0);
function calc(control) {
  if (control.checked == true) {
    theTotal += parseFloat(control.value);
  } else {
    theTotal-=parseFloat(control.value);
  }
  document.getElementById("total").innerHTML = theTotal;
}

<label><div class="col-sm-4 col-md-4 col-lg-4"><div class="services active"><input onchange="calc(this)" class="magic-checkbox" type="checkbox" name="title1" id="1" value="0" disabled checked><label for="1"></label><span class="baslik">Title 1</span>  <span> <i class="fa fa-try" aria-hidden="true"></i></span><span>0 </span></div></div></label>
<label><div class="col-sm-4 col-md-4 col-lg-4"><div class="services"><input onchange="calc(this)" class="magic-checkbox" type="checkbox" name="title2" id="2" value="20"><label for="2"></label><span class="baslik">Title 2</span>  <span> <i class="fa fa-try" aria-hidden="true"></i></span><span>20 </span> </div></div></label>
<label><div class="col-sm-4 col-md-4 col-lg-4"><div class="services"><input onchange="calc(this)" class="magic-checkbox" type="checkbox" name="title3" id="3" value="20"><label for="3"></label><span class="baslik">Title 3</span>  <span> <i class="fa fa-try" aria-hidden="true"></i></span><span>20 </span> </div></div></label>

var theTotal=parseFloat（0）；
功能计算（控制）{
if（control.checked==true）{
总+=parseFloat（control.value）；
}否则{
总-=parseFloat（control.value）；
}
document.getElementById（“总计”）.innerHTML=总计；
}
标题10
标题2 20
标题3 20

您需要将“活动”类删除到所有具有“服务”类的div中

并将类添加到单击元素的当前父级

告诉我我是对还是错

：）

$（'.magic checkbox'）。单击（函数（）{
$（this）.parents（'.services'）.toggleClass（'active'）；
getTotal（）；
})
函数getTotal（）{
$（“.total”）.html（函数（）{
var合计=0；
$（“.active”）。每个（函数（）{
total+=parseInt（$（this.find（'span:last'）.html（））；
});
返回总数；
});
}

.active{
颜色：红色；
}

标题10
标题2 20
标题3 20

0

这是一个jquery代码，单击复选框时将在父级上切换类“活动”

HTML

---

两种操作只能使用一个函数

功能计算（控制）{
var theTotal=parseFloat（0）；//在函数内部而不是外部设置total
var ParentElement=$（control.closest（'.services'）；//获取父'services'元素您还可以使用'.parent（）`而不是.closest（'.services'））
ParentElement.toggleClass（'active'）；//toggleClass active
$（'.magic checkbox:checked'）。每个（function（）{//循环遍历所有选中的复选框以获取总数
总+=parseFloat（$（this.val（））；
});
$（“#total”）.html（total）；//使用新的总值更改总html
}

.services.active{
背景：黄色；
}

标题10
标题2 20
标题3 20

给你一个解决方案

$（'.magic checkbox'）.change（函数（）{
if（$（this.prop（'checked'））{
$（this）.closest（'.services'）.addClass（'active'）；
}否则{
$（this）.closest（'.services'）.removeClass（'active'）；
}
});
.active{
颜色：红色；
}

标题10
标题2 20
标题3 20
提供
calc（）
function@Emre当你进入任何社区时，你应该尊重社区的基本原则。Stackoverflow社区不鼓励你完成别人指派的全部工作，但在你陷入困境时提供帮助。如果你对JS没有ABC知识，为什么要尝试使用它？您应该先自己尝试一下。@Hanif就像我说的，我已经尝试了所有关于ToggleClass函数的方法，但它不起作用。当我单击一个类时，它会将每个活动类添加到每个div！我知道ABC知识。那么你的代码在哪里？我已经更新了我的问题@HanifIt不能像我想要的那样工作。每个标签都必须自己使用是的！它也能正常工作。我已经通过了我的项目的另一个步骤，非常感谢你的努力！祝你今天愉快，新年快乐year@EmreY. : 酷，也祝你新年快乐，祝你的项目好运；）它不会向任何元素添加任何类。@EmreY。不客气。。检查
toggleClass
它也会工作。。祝你有美好的一天，新年快乐：-）你有一个很好的名字叫“Mohamed”，我是一名php前端开发人员，正在努力学习jquery和javascript。谢谢你的好意。新年快乐！：）@埃姆雷。非常感谢。jquery是使用js的一种非常简单的方法。。我推荐它的200个视频，但每个视频都很短。。除非需要，否则不要浪费时间学习纯javascript。。我爱火鸡顺便说一句：-）。。祝你好运
<form action="/action_page.php">
 <div>
   <input type="checkbox" id="myCheckbox" class="magic-checkbox" name="example" value="Bike"> Example Checkbox<br>
 </div>
</form>

$(document).ready(function() {
  $(".magic-checkbox").click(function() {
  $(this).parent().toggleClass('active');
  });
});