Question

我正在尝试使用Toggleclass js函数，如果选中复选框，则将活动类添加到服务分类div。但是我尝试过，没有什么可以帮助我。

任何人都可以对此有所了解吗？

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

我试过这个，但是这个函数为所有具有服务类的div添加了active。当我点击第二个标签时，我需要将活动类添加到服务div。

calc函数适用于计算复选框值;

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>

Answer 1

您需要删除该课程＆＃39; active＆＃39;所有div与课程＆＃39;服务＆＃39;

将class添加到clicked元素的当前父级。

告诉我，我是否正确

：）

＆＃13;

$('.magic-checkbox').click(function() {
  $(this).parents('.services').toggleClass('active');
  getTotal();
})

function getTotal() {
  $(".total").html(function() {
      var total = 0;
      $(".active").each(function() {
          total += parseInt($(this).find('span:last').html());
      });
      return total;
  });
}

＆＃13;

.active {
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><div class="col-sm-4 col-md-4 col-lg-4"><div class="services active"><input 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 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 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>

<br><span class="total">0</span>

＆＃13;

Answer 2

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

HTML

<form action="/action_page.php">
 <div>
   <input type="checkbox" id="myCheckbox" class="magic-checkbox" name="example" value="Bike"> Example Checkbox<br>
 </div>
</form>

的jQuery

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

Answer 3

两个动作只能使用一个功能

＆＃13;

function calc(control){
  var theTotal = parseFloat(0);  // set thetotal inside the function not outside
  var ParentElement = $(control.closest('.services')); // get the parent `services` element you can also use `.parent()` instead of .closest('.services')
  ParentElement.toggleClass('active');   // toggleClass active
  $('.magic-checkbox:checked').each(function(){  // loop through all the checked checkboxes to get the total
      theTotal += parseFloat($(this).val());
  });
  $("#total").html(theTotal);  // change the total html with the new total value
}

＆＃13;

.services.active{
  background : yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


<div id="total"></div>

＆＃13;

注意：虽然我更喜欢使用jquery ..在jquery中所有这些代码..你可以找到deference

Answer 4

您可以使用解决方案

＆＃13;

sudo ./sysInit.sh

＆＃13;

sudo ./ https://gist.githubusercontent.com/...

＆＃13;

$('.magic-checkbox').change(function(){
  if($(this).prop('checked')){
    $(this).closest('.services').addClass('active');
  } else {
    $(this).closest('.services').removeClass('active');
  }
});

＆＃13;

你在找这个吗？

试图使用具有相同的分类div的toggleclass

4 个答案: