JQuery获取所选按钮旁边的当前复选框值

Question

我将JQuery 3和iCheck library用于我的复选框。我从Ajax响应创建HTML。我有x个json对象，然后创建了x张卡片，并且在每张卡片中，我都通过json中的services数组属性创建了多个复选框。每张卡都有一个用于选择当前卡的按钮。

所以，如果我有2个对象，它看起来像这样：

Ajax成功中的1卡的HTML看起来像这样：

<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循环内，我为每个按钮创建事件：

    $('.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

之所以这样，是因为您没有为每个按钮创建事件，而是多次为所有按钮附加事件处理程序。您可以为每个购物车设置唯一的ID，然后根据ID

附加事件处理程序

$('#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}

使用此语法，您将根据选择器（较旧或较新）在所有元素上附加一个click事件。很高兴知道这一点。

如果要引用特定的元素块，请尝试根据触发器元素对其进行范围划分。您可以使用closest(),find(),siblings() ...