javascript - 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>