我正在使用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的值,但是如果我单击第二张卡,我就不想得到它们,因为没有选中的服务。
如何获取当前选中的复选框值?
答案 0 :(得分:1)
之所以会发生这种情况,是因为您没有“为每个按钮创建事件”,而是多次为所有按钮附加事件处理程序。
您可以为每个购物车设置唯一的ID,然后根据ID附加事件处理程序
$('#card-1 .select-box').on('click', function () {
console.log('test');
}
答案 1 :(得分: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>
答案 2 :(得分:0)
您可以尝试类似的方法。检查下面的摘要。
$(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() ...