Jquery复选框被选中？

Posted 2023-05-09

技术标签:

【中文标题】Jquery复选框被选中？【英文标题】：Jquery Checkbox is checked? 【发布时间】：2018-03-11 17:36:25 【问题描述】：

我正在使用 jQuery 和一个小的 rangeslider.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>');
  */
);

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

【问题讨论】：

【参考方案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>');
  
  );

【讨论】：

这适用于复选框，但不会随滑块改变。如果您也想使用滑块更改画外音价格，请在滑块值更改方法中添加代码。你不能把这两个事件放在一起，这是我的观点。哦！！这更有意义！非常感谢！【参考方案2】：

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

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

【讨论】：

【参考方案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>');
         
     
);