How to get value of the span corresponding to the checked checkbox in jquery

Question

I need to retrieve the span value as per checkbox checked using Jquery. I am explaining my code below.

<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>

Here my requirement is when checkbox will be checked then its corresponding span value will be etched and add to that hidden input textbox.

I see multiple `` elements, can you clarify exactly which one you're looking to get the `.text()` from. — Twisty, Oct 10 '18 at 07:33
Possible duplicate of [jQuery - select the associated label element of a input field](https://stackoverflow.com/questions/4844594/jquery-select-the-associated-label-element-of-a-input-field) — Cid, Oct 10 '18 at 07:35
Duplicate because your label is wrapped around the requested span. — Cid, Oct 10 '18 at 07:36
Why not just use a `value` attribute on the `input`? Forget about the hidden input and JS shenanigans entirely. — Quentin, Oct 10 '18 at 07:44
That or properly set a specific class for that span, so no risk of confusion if someone is placing the span at a wrong place. — Cid, Oct 10 '18 at 07:57

Arun Kumar · Answer 1 · 2018-10-10T07:54:42.573

Just add change event your radio buttons and then get your span text in that. Add vehicleprice id to your hidden field

$(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>

is there any issue with that? Its pretty much clear what he is asking for — Arun Kumar, Oct 10 '18 at 07:43
It is clear. He wants the value inside the `span` having the price. — Cid, Oct 10 '18 at 07:46
you were missing id for hidden field, that's why it was returning `undefined` — Arun Kumar, Oct 10 '18 at 07:52

Mohammad · Answer 2 · 2018-10-10T07:51:23.767

You should use change event listener for input[name='sVehicle'] elements and in function use .nextAll() to selecting next element after target input.

$(":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>

Note that you can use .trigger("change") to fire change event on page load to set value of first checked radio into hidden input.

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

score 0 · Answer 3 · answered Oct 10 '18 at 07:45

Here is small jquery code for getting corresponding span value :

$(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());
});

How to get value of the span corresponding to the checked checkbox in jquery

3 Answers3