使用javascript获取已检查的标签兄弟的文本

Question

我希望能够检查输入是否已检查，如果已检查，则获取与该输入关联的数据并将其显示到另一个 div 中。这是我的代码。

var levels = $('input:checked + label').map(function() {
  return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
  <div class="col-md-12">
    <div class="row sln-steps-info sln-service-info">
      <div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
        <div class="sln-checkbox">
          <input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
          <label for="sln_services_3181"></label>
        </div>

      </div>
      <div class="col-xs-10 col-sm-8">
        <label for="sln_services_3181">
          <h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
        </label>
      </div>
      <div class="col-xs-2 visible-xs-block"></div>
      <h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
    </div>
    <div class="row sln-steps-description sln-service-description">
      <div class="col-md-12"><hr></div>
      <div class="col-sm-1 hidden-xs">&nbsp;</div>
      <div class="col-sm-10 col-md-9">
        <label for="sln_services_3181">
          <p></p>
          <span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
        </label>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-11">
      <span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
        <div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
          Not enough time for this service
        </div>
      </span>
    </div>
  </div>
</div>
<div class="demo">
  You are booking a 
  <div id="listprice">
    <!-- display collected here -->
  </div>
</div>

我想收集数据并将其显示在页面其他位置的 div 中。任何有助于实现这一目标的 jquery 都会很棒。

Answer 1

$(document).ready(function(){

  var checkedItems = $('input[type=checkbox]:checked');
  
  checkedItems.each(function(){
  var serviceName =  $(this).parents('.sln-service-info').find('.sln-service-name').html();
  var servicePrice =  $(this).parents('.sln-service-info').find('.sln-service-price').html();
  $('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
  
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
    <div class="row sln-steps-info sln-service-info">    
        <div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
            <div class="sln-checkbox">
                <input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
                <label for="sln_services_3181"></label>
            </div>
        </div>
        
        <div class="col-xs-10 col-sm-8">
            <label for="sln_services_3181">
                <h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
            </label>
        </div>
        
        <div class="col-xs-2 visible-xs-block"></div>
        <h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
    </div>
    
    
    
    <div class="row sln-steps-description sln-service-description">
        <div class="col-md-12"><hr></div>
        <div class="col-sm-1 hidden-xs">&nbsp;</div>
        <div class="col-sm-10 col-md-9">
            <label for="sln_services_3181">
                <p></p>
                <span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
            </label>
        </div>
    </div>
</div>
<div class="clearfix"></div>


<div class="demo">
      You are booking a 
      <div id="listprice">
          <!-- display collected here -->
      </div>
</div>