Jqueryチェックボックスがオンになっていますか？

Question

私はjQueryと少しのrangeslider.jsを使って価格の異なるスライダーを作っています。私はすべてがうまくいくようにしましたが、2番目の2つの数字は、スライダを動かすときだけ変化し、チェックボックスをチェックしたときは変わりません。私は、チェックボックスをクリックすると、数字が正しく変更されるようにしようとしています。

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

そんなに私のcodepenはここにあるありがとう：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>'); 
     } 
    } 
});