Как получить значение диапазона, соответствующего установленному флажку в jquery

Question

Мне нужно получить значение диапазона согласно флажку, установленному с помощью Jquery.Я объясняю мой код ниже.

<div class="col-md-3 tourpricecolumn">
  <h6>Select Vehicle</h6>
  <label class="radio">
    <input type="radio" checked="checked" name="sVehicle">
    <span class="checkround"></span>Car &nbsp;
    <span class="badge badge-pill badge-primary">435</span>
  </label>
  <div class="clear"></div>
  <label class="radio">
    <input type="radio" name="sVehicle">
    <span class="checkround"></span>Bus &nbsp;
    <span class="badge badge-pill badge-primary">356</span>
  </label>
  <div class="clear"></div>
  <label class="radio">
    <input type="radio" name="sVehicle">
    <span class="checkround"></span>Tempo Traveller &nbsp;
    <span class="badge badge-pill badge-primary">567</span>
  </label>
  <input type="hidden" value="" name="vehicleprice" />
</div>

Здесь мое требование - когда флажок будет установлен, то будет вытравлено соответствующее значение диапазона и добавлено к этому hidden input textbox.

Answer 1

Вы должны использовать change прослушиватель событий для input[name='sVehicle'] элементов и в функции использовать .nextAll() для выбора следующего элемента после целевого ввода.

$(":radio").change(function(){
  $("input[name='vehicleprice']").val(
    $("input[name='sVehicle']:checked").nextAll(".badge").text()
  );
  console.log($("input[name='vehicleprice']").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 tourpricecolumn">
  <h6>Select Vehicle</h6>
  <label class="radio">
    <input type="radio" checked="checked" name="sVehicle">
    <span class="checkround"></span>Car &nbsp;
    <span class="badge badge-pill badge-primary">435</span>
  </label>
  <div class="clear"></div>
  <label class="radio">
    <input type="radio" name="sVehicle">
    <span class="checkround"></span>Bus &nbsp;
    <span class="badge badge-pill badge-primary">356</span>
  </label>
  <div class="clear"></div>
  <label class="radio">
    <input type="radio" name="sVehicle">
    <span class="checkround"></span>Tempo Traveller &nbsp;
    <span class="badge badge-pill badge-primary">567</span>
  </label>
  <input type="hidden" value="" name="vehicleprice" />
</div>

Обратите внимание, что вы можете использовать .trigger("change") для запуска события изменения при загрузке страницы, чтобы установить значение первого проверенного радио на скрытый вход.

$(":radio").change(function(){
  $("input[name='vehicleprice']").val(
    $("input[name='sVehicle']:checked").nextAll(".badge").text()
  );
}).trigger("change");

Answer 2

Вот небольшой код jquery для получения соответствующего значения диапазона:

$(document).on('change','input[name="sVehicle"]',function(){
  
  var spanval =$(this).closest('label.radio').find('span.badge').text();
  $("input[name='vehicleprice']").val(spanval);
  console.log($("input[name='vehicleprice']").val());
});

Answer 3

Просто добавьте change событие к вашим radio кнопкам, а затем получите в нем свой интервальный текст.Добавьте vehicleprice id в ваше скрытое поле

$(document).ready(function () {
        $("input[type='radio']").change(function () {
            if ($(this).is(":checked")) {
                var spanValue = $(this).parent().find("span:last").text().trim();
               // var oldVal = $("#vehicleprice").val();
                $("#vehicleprice").val(spanValue);
                
                console.log(spanValue);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 tourpricecolumn">
     <h6>Select Vehicle</h6>
     <label class="radio">
     <input type="radio" checked="checked" name="sVehicle">
     <span class="checkround"></span>Car &nbsp;<span class="badge badge-pill badge-primary">435</span>
   </label>
   <div class="clear"></div>
   <label class="radio">
   <input type="radio" name="sVehicle">
   <span class="checkround"></span>Bus &nbsp;<span class="badge badge-pill badge-primary">356</span>
 </label>
<div class="clear"></div>
 <label class="radio">
<input type="radio" name="sVehicle">
<span class="checkround"></span>Tempo Traveller &nbsp;<span class="badge badge-pill badge-primary">567</span>
 </label>
<input type="hidden" value="" name="vehicleprice" id="vehicleprice" />
 </div>