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

【问题标题】：How to get value of the span corresponding to the checked checkbox in jquery如何获取与jquery中选中的复选框相对应的跨度值
【发布时间】：2019-03-15 01:12:17
【问题描述】：

我需要根据使用 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。

【问题讨论】：

我看到了多个<span> 元素，您能否明确说明您希望从哪个元素中获取.text()。
@Twisty ：我需要来自这个<span class="badge badge-pill badge-primary">435</span> span 元素的值。
jQuery - select the associated label element of a input field的可能重复
重复，因为您的标签包裹在请求的跨度周围。
为什么不在input 上使用value 属性？完全忘记隐藏的输入和 JS 恶作剧。

标签： javascript jquery html radio-button

【解决方案1】：

您应该对input[name='sVehicle'] 元素使用change 事件侦听器，并在函数中使用.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");

【讨论】：

【解决方案2】：

只需添加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>

【讨论】：

这有什么问题吗？很清楚他的要求是什么
很清楚。他希望span 中的值有价格。
我在你的函数中添加了一个console.log
您缺少隐藏字段的 id，这就是它返回 undefined 的原因
他只想要价格

【解决方案3】：

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

【讨论】：