CODEWITHSUNDEEP
javascripthtmljqueryradio-button
Anupam Mistry
Anupam Mistry

Reputation: 421

How to call selected radio button's input 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>

Upvotes: 0

Views: 133

Answers (1)

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 1

Related Questions