Jquery Case à cocher est cochée?

Question

Je travaille sur un curseur qui a des prix différents en utilisant jQuery et un peu rangeslider.js. J'ai tout fait fonctionner, mais les deux derniers chiffres ne changent que lorsque je déplace le curseur, pas quand je coche la case. J'essaye de faire les nombres changent juste quand je clique la case à cocher.

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

Merci beaucoup mon codepen est ici: https://codepen.io/2cheeky4you/pen/QqGKpy

Answer 1

Mise à jour CodePen:https://codepen.io/bhansa/pen/aLwGZo

Vous devez ajouter un événement de changement à votre case à cocher et mettre à jour les données HTML dans l'instruction if. Conservez votre méthode de changement de case à cocher en dehors de la méthode de modification 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

Vous devez réagir à l'événement de changement sur la case à cocher:

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

Answer 3

Le problème est que tout votre code est enveloppé en cas de changement du curseur. Cela signifie que la vérification du changement de case à cocher ne se produit que lorsque le curseur change également. Déplacer cette ligne

}); 

AU-DESSUS de votre code commenté. Puis formatez le code commenté en bas comme ceci.

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