使用iCheck-helper时如何通过类获取下一个span元素值?

时间:2018-10-10 10:22:30

标签: javascript jquery twitter-bootstrap icheck

当使用iCheck-helper并使用引导程序和jQuery时,我需要获取每个类名称的下一个span元素值。我在下面提供我的代码。

$(".price-efect").on('ifChanged', function(event) {
  $("input[name='vehicleprice']").val(
    $("input[name='sVehicle']:checked").nextAll(".badge").text()
  );
  console.log('price1', $("input[name='sVehicle']:checked").nextAll(".badge").text());
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="col-md-3 tourpricecolumn">
  <h6>Select Vehicle</h6>
  <label class="radio">
        <input type="radio" name="sVehicle" class="price-efect">
        <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" class="price-efect">
        <span class="checkround"></span>Bus &nbsp;
        <span class="badge badge-pill badge-primary">356</span>
      </label>
  <div class="clear"></div>
  <input type="hidden" value="" name="vehicleprice" />
</div>

在这里,我需要获取下一个span元素值,其class = badge。我是这样做的,但是无法获得任何结果。

1 个答案:

答案 0 :(得分:0)

创建了必需的小提琴。让我知道这是否适合您。

$(".price-efect").on('change', function(event) {
        var selectedbadgeprice = $("input[name='sVehicle']:checked").nextAll(".badge").text();
        var unselectedbadgeprice = $("input[name='sVehicle']").not(':checked').nextAll(".badge").text();
        alert("selectedbadgeprice : " + selectedbadgeprice);
        alert("unselectedbadgeprice : " + unselectedbadgeprice);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-3 tourpricecolumn">
        <h6>Select Vehicle</h6>
        <label class="radio">
            <input type="radio" name="sVehicle" class="price-efect">
            <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" class="price-efect">
            <span class="checkround"></span>Bus &nbsp;
            <span class="badge badge-pill badge-primary">356</span>
        </label>
        <div class="clear"></div>
        <input type="hidden" value="" name="vehicleprice" />
    </div>

https://jsfiddle.net/qy4h7evz/