如何通过单击单选按钮更改范围滑块添加？答案

【问题标题】：How to change the range slider addition by click on radio button?如何通过单击单选按钮更改范围滑块添加？
【发布时间】：2021-08-17 05:27:56
【问题描述】：

我有两个单选按钮和多个范围滑块。两个单选按钮具有不同的值。
我想要的是当我单击其中一个单选按钮时，最大值应更改（12 更改为 24，24 更改为 12）。并且这些范围滑块的添加会向上移动到单选按钮的值。

<input type="radio" id="starter" name="plan" value="starter">
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" value="plus">
<label for="plus">Up to 24</label><br>

 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

【问题讨论】：

addition of those range sliders moves up to the radio button's value.. 是什么意思？另外，你在用this插件吗？
表示第一个滑块移动到6，第二个移动到4，第三个移动到2，但是第四个不能移动。因为这 3 个滑块最多可达 12 个。

标签： javascript html jquery radio-button

【解决方案1】：

每当您的范围滑动更改时，您可以使用.each 循环计算所有滑块的 total 并检查总数是否大于最大值，如果是，您可以将最后一个滑块值更改为0

演示代码：

$(".slider").on("change", function() {
console.clear()
  var max = $("[name=plan]:checked").data('max')
  var total = 0
  //get total
  $(".slider").each(function() {
    total += parseInt($(this).val()) //calculate total
  })
  console.log("Total --" + total + " Max --" + max)
  if (total > max) {
    $(this).val(0) //set value to 0 again..
    console.log("can't move..")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--added max-->
<input type="radio" id="starter" name="plan" data-max="12" value="starter" checked>
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" data-max="24" value="plus">
<label for="plus">Up to 24</label><br>

<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

【讨论】：

这是正确的代码，但是如何在滑块的蓝色圆圈上添加数字，这样我才能知道移动了多少个数字滑块。
试试 this 让我知道你是否解决了这个问题，如果你需要在 css 中这样做，我不擅长 :) 你可以为此提出新问题。
再次感谢您解决了我大部分与 JS 相关的问题。你怎么对 JS 这么了解？
:P 在这里通过给出答案来学习。