Get text of label sibling of checked checked using javascript

Question

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.

You should put your code in change event listener

Mohammad
– Mohammad

2018-10-04 08:16:47 +00:00
Commented Oct 4, 2018 at 8:16 — Mohammad
– Mohammad, Commented Oct 4, 2018 at 8:16

SilentCoder · Accepted Answer · 2018-10-05 00:08:25Z

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>

edited Oct 5, 2018 at 0:08

answered Oct 4, 2018 at 8:20

SilentCoder

1,9901 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Riots Over a year ago

I want to mark this as the accepted answer but I forgot to mention this page is loaded with the checkbox already checked. So i don't think .change is the correct method because it looks for mouse click change. How can we make it work when page is loaded input is already checked?

SilentCoder Over a year ago

I edited your code as requested. You need to check all the checked items in the document ready function and go do the adjustments.

Collectives™ on Stack Overflow

Get text of label sibling of checked checked using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related