Question

我正在使用jQuery和一些rangelider.js制作一个价格不同的滑块。我让一切正常，但是后两个数字只在我移动滑块时改变，而不是在我选中复选框时。当我点击复选框时，我试图让数字改变。

$(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>');
  }*/
});

非常感谢我的代码在这里：https://codepen.io/2cheeky4you/pen/QqGKpy

Answer 1

更新了CodePen： https://codepen.io/bhansa/pen/aLwGZo

您应该在复选框中添加更改事件，并在if语句中更新html数据。保持复选框更改方法不受input#range-slider更改方法的限制。

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

问题是所有代码都包含在滑块的更改事件中。

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

这意味着仅在滑块更改时才会检查复选框更改。移动这一行

});

超出您的评论代码。然后像这样格式化底部的注释代码。

$('#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>');
         }
     }
});

检查Jquery复选框？

3 个答案: