JQuery получить текущее значение флажка рядом с выбранной кнопкой

Question

Я использую JQuery 3 и iCheck library для своих флажков. Я создаю свой HTML из ответа Ajax. У меня есть x json объектов, затем я создаю x карточку, и в каждой карточке я создаю несколько флажков из свойства массива services в моем json. У каждой карты есть кнопка для выбора текущей карты.

Так что, если я получил 2 объекта, это выглядит так:

HTML из 1 карты в успехе Ajax выглядит следующим образом:

<div class="row">
  <div class="col-md-12">
    <div class="box box-primary">
      <div class="box-header with-border">
        <div class="box-tools pull-right"></div>
        <h3 class="box-title">Title 1</h3>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-md-4 col-sm-6">
            <ul class="services">
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="1"/> Service 1 - 82.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="2"/> Service 2 - 45.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="3"/> Service 3 - 15.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="4"/> Service 4 - 10.00€
                </label>
              </li>
            </ul>
            <button class="btn btn-primary btn-block select-box">Select this box</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

В случае успеха Ajax внутри json l oop я создаю событие для каждой кнопки:

    $('.select-box').on('click', function () {
      console.log('test');
    });

Но у меня проблема, потому что я не знаю, как я могу получить только текущее значение флажков в соответствии с выбранной картой. Например, если вы посмотрите мое изображение, если я нажму на первую карточку, я хочу указать стоимость услуг 1 и 2, но если я нажму на вторую карточку, я не хочу получать их, потому что нет проверенной услуги.

Как получить текущее значение выбранного флажка?

Answer 1

Используйте $(this), чтобы указать кнопку, которую пользователь фактически нажал. Подробности комментируются в демоверсии.

// When any button.select-box is clicked...
$('.select-box').on('click', function(e) {

  /*
  Find the ul.services that is positioned before the clicked button.select-box
  */
  var services = $(this).prev('.services');
  
  /*
  Then find each checked checkbox and log their values
  */
  services.find(':checked').each(function(i) {
    console.log($(this).val());
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
<div class="row">
  <div class="col-md-12">
    <div class="box box-primary">
      <div class="box-header with-border">
        <div class="box-tools pull-right"></div>
        <h3 class="box-title">Title 1</h3>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-md-4 col-sm-6">
            <ul class="services">
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="1"/> Service 1 - 82.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="2"/> Service 2 - 45.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="3"/> Service 3 - 15.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="4"/> Service 4 - 10.00€
                </label>
              </li>
            </ul>
            <button class="btn btn-primary btn-block select-box">Select this box</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="box box-primary">
      <div class="box-header with-border">
        <div class="box-tools pull-right"></div>
        <h3 class="box-title">Title 2</h3>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-md-4 col-sm-6">
            <ul class="services">
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="5"/> Service 5 - 82.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="6"/> Service 6 - 45.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="7"/> Service 7 - 15.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="8"/> Service 8 - 10.00€
                </label>
              </li>
            </ul>
            <button class="btn btn-primary btn-block select-box">Select this box</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 2

Это происходит потому, что вы не «создаете событие для каждой кнопки», а подключаете обработчик событий для всех кнопок несколько раз.
Вы можете установить уникальные идентификаторы для каждой корзины, а затем прикрепить обработчики событий на основе идентификатора

$('#card-1 .select-box').on('click', function () {
    console.log('test');
}

Answer 3

Вы можете попробовать что-то вроде этого. Проверьте фрагмент ниже.

$(document).ready(() => {
  
  $(document).on('click', ".select-box", function() {// Attaching the event on all buttons (even the new), you don't need to put the eventlistener in the loop

    var checkboxes = $(this).siblings("ul.services").find("input");
  // $(this) refer to the button, use siblings to catch your ul and use find to get all your inputs
    checkboxes.each(function() {
    
      if ($(this).is(":checked")) { //$(this) refers to the current element in the loop
        console.log($(this).val());
        // Do some stuff if it's checked
      }

    })
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="box box-primary">
      <div class="box-header with-border">
        <div class="box-tools pull-right"></div>
        <h3 class="box-title">Title 1</h3>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-md-4 col-sm-6">
            <ul class="services">
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="1"/> Service 1 - 82.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="2"/> Service 2 - 45.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="3"/> Service 3 - 15.00€
                </label>
              </li>
              <li>
                <label>
                  <input type="checkbox" name="checkbox" value="4"/> Service 4 - 10.00€
                </label>
              </li>
            </ul>
            <button class="btn btn-primary btn-block select-box">Select this box</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Немного больше:

 $(document).on('click',selector, function() { //stuff}

С помощью этого синтаксиса вы добавите событие щелчка ко всем элементам в соответствии с вашим селектором (старше или новее). Приятно знать это.

Если вы хотите сослаться на определенный c блок элементов, попробуйте расширить его в соответствии с вашим триггерным элементом. Вы можете использовать closest(),find(),siblings() ...