Jquery复选框被选中？

Question

I am working on making a slider that has different prices using jQuery and a little rangeslider.js. I made everything work, but the second two numbers only change when I move the slider, not when I check the checkbox. I am trying to make the numbers change right when I click the checkbox.

$(document).on('input change', '#range-slider', '#voiceover', function() { //Listen to slider changes (input changes)       

    var v=$(this).val();
  var voiceOption = $('#voiceover');//Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL])
  console.log(v);

$('#sliderStatus').html(videoDuration[v]);
$('#sliderPrice').html('<span>$'+videoSubtotal[v]+'.00</span>');

var totalPrice = parseInt(voiceoverSubtotal[v])+parseInt(videoSubtotal[v]);
  if(voiceOption.is(":checked")){
    $('#voiceoverspan').html('<span>$'+voiceoverSubtotal[v]+'.00</span>');
      $('#totalspan').html('<span>$'+totalPrice+'.00</span>');
  }
    else{
    $('#voiceoverspan').html('<span>$0.00</span>');
     $('#totalspan').html('<span>$'+videoSubtotal[v]+'.00</span>');
  }

  /*if(voiceOption.is(":checked") ){
    $('#totalspan').html('<span>$'+totalPrice+'.00</span>');
  }
  else{
    $('#totalspan').html('<span>$'+videoSubtotal[v]+'.00</span>');
  }*/
});

Thank you so much my codepen is here: https://codepen.io/2cheeky4you/pen/QqGKpy

Answer 1

Updated CodePen: https://codepen.io/bhansa/pen/aLwGZo

You should add a change event to your checkbox and update the html data in the if statement. Keep your checkbox change method out of the input#range-slider change method.

v = $("input#range-slider").val();

 voiceOption.on("change", function(){
    if(voiceOption.is(":checked")){
    $('#voiceoverspan').html('<span>$'+voiceoverSubtotal[v]+'.00</span>');
      $('#totalspan').html('<span>$'+totalPrice+'.00</span>');
  }
    else{
    $('#voiceoverspan').html('<span>$0.00</span>');
     $('#totalspan').html('<span>$'+videoSubtotal[v]+'.00</span>');
  }
  });

Answer 2

您需要对复选框上的更改事件做出反应：

$("#voiceover").on("change", doUpdate);

Answer 3

The problem is that all of your code is wrapped in the change event for the slider.

$(document).on('input change', '#range-slider', '#voiceover', function() { //Listen to slider changes (input changes)       

That means the check for the checkbox changing only happens when the slider changes too. Move this line

}); 

ABOVE your commented code. Then format the commented code at the bottom like this.

$('#checkBoxId').on('click', function() {
     if(this.checked) {
         if(voiceOption.is(":checked") ){
             $('#totalspan').html('<span>$'+totalPrice+'.00</span>');
         }
         else {
             $('#totalspan').html('<span>$'+videoSubtotal[v]+'.00</span>');
         }
     }
});