javascript - 循环遍历具有特定类的 div 中的所有复选框

Question

我想循环遍历 div 内具有特定类的某些复选框。 我知道如何通过为每个人添加 ID 来实现这一目标，但这不是我想要的。下面是我的代码

JS

<script>
function calculate()
{
    $('#payments').find('.checkBoxP').each(function() {
        if ( $('.checkBoxP').prop('checked') )
        {
            alert('its on');
        }
        if ( !$('.checkBoxP').prop('checked') )
        {
            alert('nope');
        }
    });
}

calculate();
</script>

HTML

<div class="row-fluid" id="payments">
   <div class="span4">Sale No # 112<div class="widget-header">
                    <span>Pizza</span>
                        <span class="shopp-price" style="margin-right:5px;"> $<em>10.90</em>
                        </span>
                        <span class="widget-toolbar">
                            <label>
                                <input onchange="calculate();" type="checkbox" class="checkBoxP"></input>
                                <span class="lbl"></span>
                            </label>
                        </span>
                    </div>Sale No # 110<div class="widget-header">
                    <span>Coca Cola</span>
                        <span class="shopp-price" style="margin-right:5px;"> $<em>17.20</em>
                        </span>
                        <span class="widget-toolbar">
                            <label>
                                <input onchange="calculate();" type="checkbox" class="checkBoxP"></input>
                                <span class="lbl"></span>
                            </label>
                        </span>
                    </div>

请注意，下面还有一些我不想包含在搜索中的输入，这就是我插入该类的原因。

Answer 1

您需要检查当前迭代的复选框是否被选中，相反，您的条件将始终检查第一个复选框是否被选中

function calculate() {
    $('#payments').find('.checkBoxP').each(function () {
        if (this.checked) {
            alert('its on');
        } else {
            alert('nope');
        }
    });
}