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按钮中添加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>

Answer 2

对于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 3

这是用于获取对应的span值的小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());
});

如何获取与jQuery中选中的复选框相对应的跨度值

3 个答案: