Javascript Jquery-如何仅从最近的父级获取复选框值？

我正在做一个学校作业，我们开始学习Jquery

我希望从一组复选框中收集值，但只收集div中包含的值，该div中包含触发函数的按钮

到目前为止，我已经能够获得这些值，但是如果在其他div中选中任何一个框，这些值也会被添加，因为它们需要共享相同的名称。我试图避免重复代码

这是我的Jquery代码：

$(document).ready(function() {
    $('button').on('click', function() {
        var destination = $(this).closest('.destinations'); //this selects the div the button is in but I can't figure out how to apply it to the checkbox value gathering
        var base_price = $(destination).find('.base_price').text();
        var add_ons = [];
        $.each($("input[name='add_on']:checked"), function(){ //I player around with using the variable destination somewhere here but am thinking there needs to be another step
            add_ons.push($(this).val());
        });
        $(this).remove();
        console.log(base_price)
        console.dir(add_ons) //the values are successfully added but I can't figure out how to isolate based on the the variable 'destination'
        });
    });

HTML

纽约，纽约

包括：5晚酒店住宿、中央公园旅游和纽约摩天大楼套餐

起价1299.99美元

附加组件
在丽思酒店加上两晚住宿

百老汇演出

纽约牛排馆美食之夜之旅

获得价格
法国巴黎

包括：5晚酒店住宿、3套博物馆套餐和法国之旅的体验

起价1699.99美元

附加组件
三天葡萄园和花卉之旅

参观埃菲尔铁塔

会见马克龙总统

获得价格
日本东京

包括：5晚酒店住宿、打造口袋妖怪活动和盆景课程

起价1199.99美元

附加组件
Aragawa Wagyu牛排晚餐

随机日本游戏秀之夜

富士山探险

获得价格

任何帮助都将不胜感激

您应该只选中该父div中的复选框

---

试试这个代码。destination.each（$（$（input[name='add_on']：checked））、function（）{add_ons.push（$（this.val（））；}）@JakirHossen

$.fn.each（）

需要一个函数，因为存在多个同名复选框，并且它不是

[]

数组名，这真的没有意义。该名称与上一个问题中的html也不匹配。始终提供足够的html使其成为可运行的目标。find（“input[name='add_on']：checked”）。each（function（）{add_ons.push（$（this.val（））；}）；哦，对不起。我添加了HTML。Charlie你能解释一下它不是数组名是什么意思吗？这与

add_-ons=[]不同吗？我对每一个都使用了相同的名称，因为这是一种检查我在查找时找到的复选框值的方法。有更好的方法吗？请注意，
destination
已经是jQuery对象了。无需在
$（）
中再次包装它，这样就可以了！谢谢你，比基，再次感谢你，查理，谢谢你突然出现在这里，还有关于包装纸的便条。不客气@凯文麦格雷尔
<div class = "destinations">
    <h2>New York, New York</h2>
    <img src="images/newyork.jpeg">
    <p>
        Includes: 5 Night Hotel Stay, Central Park Tours, and New York Skyscrapers Package<br>
        Starting at $<span class="base_price">1299.99</span>
    </p>
    <div>
        <h3>Add-Ons</h3>
        <input type="checkbox" id="option1" name="add_on" value="1000">
        <label for="option1"> Add Two-Night Stay at the Ritz</label><br>
        <input type="checkbox" id="option2" name="add_on" value="200">
        <label for="option2"> Broadway Show</label><br>
        <input type="checkbox" id="option3" name="add_on" value="400">
        <label for="option3"> New York Steakhouse Gourmet Night Out</label><br>
    </div>
    <div>
        <button id = "nyny">Get price</button>
    </div>
</div>
<div class="destinations">
    <h2>Paris, France</h2>
    <img src="images/eiffel_tower.jpeg">
    <p>
        Includes: 5 Night Hotel Stay, 3 Museum Package, and Taste of France Tour<br>
        Starting at $<span class="base_price">1699.99</span>
    </p>
    <div>
    <h3>Add-Ons</h3>
    <input type="checkbox" id="option1" name="add_on" value="1000">
    <label for="option1"> 3 day Vineyards and Flowers Tour</label><br>
    <input type="checkbox" id="option2" name="add_on" value="200">
    <label for="option2"> Visit the Eiffel Tower</label><br>
    <input type="checkbox" id="option3" name="add_on" value="400">
    <label for="option3"> Meet President Macron</label><br>
    </div> 
     <button id = "paris">Get Price</button>
 </div>
<div class = "destinations">
    <h2>Tokyo, Japan</h2>
    <img src="images/tokyo.jpeg">
    <p>
        Includes: 5 Night Hotel Stay, Build a Pokemon Event, and a Bonsai Class<br>
        Starting at $<span class="base_price">1199.99</span>
    </p>
    <div>
    <h3>Add-Ons</h3>
    <input type="checkbox" id="option1" name="add_on" value="1000">
    <label for="option1"> Wagyu Steak Dinner at Aragawa</label><br>
    <input type="checkbox" id="option2" name="add_on" value="200">
    <label for="option2"> Random Japanese Game Show Night!</label><br>
    <input type="checkbox" id="option3" name="add_on" value="400">
    <label for="option3"> Mount Fuji Adventure</label><br>
    </div>
    <button id = "japan">Get Price</button>
</div>

$(document).ready(function() {
    $('button').on('click', function() {
        var destination = $(this).closest('.destinations'); // selecting the div container
        var base_price = $(destination).find('.base_price').text();
        var add_ons = [];
        //$(destination) selects the parent div and find() function finds checkbox within that div.
        $(destination).find("input[name='add_on']:checked")).each(function(){ 
            add_ons.push($(this).val());
        });
        $(this).remove();
        console.log(base_price)
        console.dir(add_ons);
        });
    });