Jquery

Question

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

我希望从一组复选框中收集值，但仅收集属于 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

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

如有任何帮助，我们将不胜感激

Answer 1

You should only select checkbox within that parent 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);
        });
    });

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

Jquery - How do you get checkbox values from closest parent only?

javascript

checkbox

parent-child

closest