CODEWITHSUNDEEP
jquery
Julien
Julien

Reputation: 159

Get label from checked input

I'd like to get the label .text() from checked inputs. Actually, my code check if an input is checked and then get the label from every <li> with same class and not only the checked ones. How can I achieved that? I think that I should use the .parent() or .child() attribute but I don't know how.

I've tried with alert($('#myId input').parent('label').text()); but without success.

Codepen https://codepen.io/Qasph/pen/LyNJev?editors=1010

$('#result').click(function() {
  // If an input is checked
  if ($('#myId input').is(':checked')) {
    // Get text from label parent
    console.log($('#myId label').text());
  } else {}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId">
  <ul>
    <!-- First class -->
    <li class="myFirstClass"><label><input type="checkbox" value="3">1 - First class</label></li>
    <li class="myFirstClass"><label><input type="checkbox" value="6">2 - First class</label></li>
    <!-- Second class -->
    <li class="mySecondClass"><label><input type="checkbox" value="3">1bis - Second class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="6">2bis - Second class</label></li>
  </ul>
</div>
<button id="result">Result</button>

Upvotes: 3

Views: 3507

Answers (4)

MarcelD
MarcelD

Reputation: 423

If you just need the text for checked checkboxes labels, i would just ask for them ;)

$('#result').click(function() {
  var $checkedInputs = $('input:checked');
  
  if ($checkedInputs.length !== -1) {
    $checkedInputs.each(function (i) {
      alert($checkedInputs.eq(i).parent().text());
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId">
  <ul>
    <!-- First class -->
    <li class="myFirstClass"><label><input type="checkbox" value="3">1 - First class</label></li>
    <li class="myFirstClass"><label><input type="checkbox" value="6">2 - First class</label></li>
    <!-- Second class -->
    <li class="mySecondClass"><label><input type="checkbox" value="3">1bis - Second class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="6">2bis - Second class</label></li>
  </ul>
</div>

<button id="result">Result</button>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177691

Loop or map the checked inputs and grab the parent or closest label

$('#result').click(function() {
  // If an input is checked
  var result = [];
  $('#myId input:checked').each(function() { // or map
    result.push($(this).parent().text())
  });
  console.log(result);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId">
  <ul>
    <!-- First class -->
    <li class="myFirstClass"><label><input type="checkbox" value="3">1 - First class</label></li>
    <li class="myFirstClass"><label><input type="checkbox" value="6">2 - First class</label></li>
    <!-- Second class -->
    <li class="mySecondClass"><label><input type="checkbox" value="3">1bis - Second class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="6">2bis - Second class</label></li>
  </ul>
</div>
<button id="result">Result</button>

Upvotes: 2

MortenMoulder
MortenMoulder

Reputation: 6648

$('#result').click(function() {
  // If an input is checked
  $('#myId input').each(function() {
      if($(this).is(":checked")) {
        console.log($(this).parent().text());
      }
  })
});

Alternative to Rory's answer. Simply checks each input if it's checked (a bit easier to read and understand, but does the exact same thing).

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve this you can use map() to loop over all :checked checkboxes and build an array of the text values of the parent label element. Try this:

$('#result').click(function() {
  var labels = $('#myId :checked').map(function() {
    return $(this).closest('label').text();
  }).get();
  
  console.log(labels);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myId">
  <ul>
    <li class="myFirstClass"><label><input type="checkbox" value="3">1 - First class</label></li>
    <li class="myFirstClass"><label><input type="checkbox" value="6">2 - First class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="3">1bis - Second class</label></li>
    <li class="mySecondClass"><label><input type="checkbox" value="6">2bis - Second class</label></li>
  </ul>
</div>
<button id="result">Result</button>

Upvotes: 5

Related Questions