如何调用所选单选按钮的输入 ID? [英] How to call selected radio button's input ID?

问题描述

我在单选按钮组和范围滑块中有多个输入及其 ID.我想要添加所有选中的单选按钮和范围滑块的乘法.但是我没有检查单选按钮的输入类型文本值.下面是我尝试过的，但代码错误.

I have multiple inputs with their ID in the radio button group and range slider. I want the addition of all multiplication of checked radio buttons and range sliders. But I don't get checked radio button's input type text value. Below something I tried but it's the wrong code.

$(document).ready(function() {
  $('.range').on('change', function() {
    let total = 0;
    let multiplyFactor = document.getElementById(`actualtime${inputIndex}`).value;
    console.log(multiplyFactor);
    $('.range').each(function() {
      total += (parseFloat($(this).val()) * multiplyFactor);
    });
    
    $('#timetoproduce').text(total);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="starter"><input type="radio" id="" class="radio-roi"name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled></label><br>
<label for="plus"><input type="radio" id="" class="radio-roi"name="plan" value="plus" >
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled></label><br>
<label for="pro"><input type="radio" id="" class="radio-roi"name="plan" value="pro" >
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled></label><br>


<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>

<span id="timetoproduce" value=""></span>

推荐答案

你可以用 :checked 和 next 来查找输入值

You could do with :checked and next to find the input value

$(document).ready(function() {
  $('.range').on('change', function() {
    let n  = $(this).attr('id').match(/\d+/g)[0];
    let total = 0;
    let checkVal = $('.radio-roi:checked').next('input').val();
    let multiplyFactor = parseFloat(checkVal);
    console.log(multiplyFactor)
    $('.range').each(function() {
      total += (parseFloat($(this).val()) * multiplyFactor);
    });

    $('#timetoproduce').text(total);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="plus">
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>


<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>

<span id="timetoproduce" value=""></span>

这篇关于如何调用所选单选按钮的输入 ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！