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

我使用jQuery3和作为我的复选框。我从Ajax响应创建HTML。我有x个json对象，然后我创建x个卡片，在每个卡片中，我从json中的服务数组属性创建多个复选框。每张卡都有一个按钮来选择当前卡

如果我有两个物体，它看起来像这样：

<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成功中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>

但我有一个问题，因为我不知道如何根据所选卡只获取当前复选框的值。例如，如果您查看我的图像，如果我单击第一张卡，我希望得到服务1和2的值，但是如果我单击第二张卡，我不希望得到它们，因为没有选中的服务

---

如何获取当前选中的复选框值？

之所以出现这种情况，是因为您没有“为每个按钮创建事件”，而是多次为所有按钮附加事件处理程序
您可以为每个购物车设置唯一的id，然后根据id附加事件处理程序

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

使用

$（this）

指定用户实际单击的按钮。演示中的详细说明

//单击任何按钮.select-box时。。。
$（'.select box'）。在（'click'，函数（e）{
/*
查找位于单击按钮之前的ul.services.select-box
*/
var services=$（this.prev（'.services'）；
/*
然后找到每个复选框并记录它们的值
*/
服务.查找（':checked'）。每个（函数（i）{
log（$（this.val（））；
});
});

标题1


服务1-82.00欧元


服务2-45.00欧元


服务3-15.00欧元


服务4-10.00欧元


选择此框
标题2


服务5-82.00欧元


服务6-45.00欧元


服务7-15.00欧元


服务8-10.00欧元


选择此框
您可以尝试这样的方法。检查下面的飞贼


$（文档）.ready（（）=>{
$（document）.on（'click'，”.select box），function（）{//将事件附加到所有按钮上（即使是新按钮），您不需要将eventlistener放入循环中
var复选框=$（this）.sibbines（“ul.services”）.find（“input”）；
//$（这）参考按钮，使用同级来捕获ul，并使用find来获取所有输入
复选框。每个（函数（）{
if（$（this）.is（“：checked”）{/$（this）引用循环中的当前元素
log（$（this.val（））；
//如果检查过的话，做点什么
}
})
});
})

标题1


服务1-82.00欧元


服务2-45.00欧元


服务3-15.00欧元


服务4-10.00欧元


选择此框
好的，谢谢。我为每个按钮添加了一个id，然后将事件附加到此id。但我的复选框问题仍然存在。我不知道如何确定我的复选框的范围以获得最接近的服务谢谢你的回答，如果你在两张不同的卡中有相同的复选框值，它会起作用吗？是的，它只会获取直接位于用户单击的按钮之前的复选框。酷！我在我的代码中进行了测试，它很有效，非常感谢。当我将事件附加到按钮时，我只是在循环中设置了一个id:
$（'#select box-'+data.id）。on（'click'，function（）
我把你的代码放在里面，这正是我需要的！这很好，但请记住，在使用jQuery时很少需要
#id
，
.class
在99%的时间里就足够了。随着你越来越熟练，它会变得越来越明显。快乐的编码！我不能在这里使用class，因为我是动态创建html的，我附加了循环中的事件，因此当我单击按钮时，将触发该类上的所有单击事件