Question

我的主要目标是，如果选中了旁边的复选框，则获取用户在文本框中键入的内容，并对所有选中的复选框求和。

但是我当前面临的问题是，附加复选框值后，我什至无法获取。

如何解决这个问题？ Jsfiddle link here

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$('.boxes').on('change', function() {

    console.log('qwe')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#">

    <label>Exercises</label>

    <fieldset id="exercises">
        <div class="exercise">
            <input type="text" name="amount" value="">
            <input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button>
        </div>
    </fieldset>

    <button id="add_exercise">add exercise</button>

</form>

Answer 1

您正在动态添加框，因此需要使用.on绑定更改或click事件，并迭代所有选中的复选框以获取其先前输入的值并将其相加以获得总和。

见下文

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$(document).on('click','.boxes', function() {
   var sum = 0;
   $('.boxes:checked').each(function(){
     //var val = $(this).prev('input').val();
     var val = $(this).siblings('input[name=amount]').val();
     sum += parseInt(val) || 0;
   });
   console.log("Sum = " + sum);
});

JSFiddle

Answer 2

尝试一下。它适用于动态和静态元素。这称为事件委托

$('.wrapper-class').on("event", '.selector-class', function() {
    // Your code
});

$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="exercise"><input type="text" name="amount"><input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button></div>');
    return false; //prevent form submission
});

$('#exercises').on('click', '.remove', function() {
    $(this).parent().remove();
    return false; //prevent form submission
});

$('#exercises').on('change','.boxes' ,function() {

    console.log('qwe')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="#">

    <label>Exercises</label>

    <fieldset id="exercises">
        <div class="exercise">
            <input type="text" name="amount" value="">
            <input type="checkbox" name="exercise[]" class="boxes"><button class="remove">x</button>
        </div>
    </fieldset>

    <button id="add_exercise">add exercise</button>

</form>

jQuery，添加复选框后无法读取复选框值

2 个答案: