jeudi 4 octobre 2018

Get text of label sibling of checked checked using javascript

I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.

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>

I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.




Aucun commentaire:

Enregistrer un commentaire