1
<div id="search-params-countries" class="search-params-select">
    <h2>Страны</h2>
    <label><input type="checkbox">Индия</label>
    <label><input type="checkbox">Китай</label>
    <label><input type="checkbox">Россия</label>
    <label><input type="checkbox">США</label>
</div>

Как получить значения label выбранных чекбоксов с помощью jQuery?

3 ответа 3

0

Самый простой вариант как по мне с помощью jQuery, в нативном JS не силён, так что только такой вариант могу предложить:

$(document).on("click", ".search-params-select input[type='checkbox']", function() {
  console.log($(this).closest('label').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-params-countries" class="search-params-select">
    <h2>Страны</h2>
    <label><input type="checkbox">Индия</label>
    <label><input type="checkbox">Китай</label>
    <label><input type="checkbox">Россия</label>
    <label><input type="checkbox">США</label>
</div>
Если нужно всех выбранных:

var checkedArray = [];
$(".search-params-select input[type='checkbox']:checked").each(function(index, el) {
  checkedArray.push($(el).closest('label').text());
});
console.log(checkedArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-params-countries" class="search-params-select">
    <h2>Страны</h2>
    <label><input type="checkbox" checked>Индия</label>
    <label><input type="checkbox">Китай</label>
    <label><input type="checkbox">Россия</label>
    <label><input type="checkbox">США</label>
</div>

0

Вопрос решил следующим образом:

$('#search-params-countries label').each(function() {
  if ($(this).children().is(':checked'))
    countries.push($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-params-countries" class="search-params-select">
  <h2>Страны</h2>
  <label><input type="checkbox">Индия</label>
  <label><input type="checkbox">Китай</label>
  <label><input type="checkbox">Россия</label>
  <label><input type="checkbox">США</label>
</div>

0

Еще вариант на чистом JS

var inputs = document.getElementsByTagName('input');
var lab;
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function() {
    if (this.checked) {
      lab = this.parentNode.textContent;
      console.log(lab);
    }

  })

}
<div id="search-params-countries" class="search-params-select">
  <h2>Страны</h2>
  <label for="input1"><input id="input1" type="checkbox">Индия</label>
  <label for="input2"><input id="input2" type="checkbox">Китай</label>
  <label for="input3"><input id="input3" type="checkbox">Россия</label>
  <label for="input4"><input id="input4" type="checkbox">США</label>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.