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>

请注意，下面还有一些inputs，我不想在搜索中包含我插入课程的原因。

Answer 1

这是最简洁的方法！

function calculate() {
    $("#payments .checkBoxP").each(function() {
        alert($(this).is(":checked") ? "it's on" : "nope");
    });
}

http://jsfiddle.net/4vAPU/

这也可以通过纯JavaScript实现，但在这种情况下，您需要确保为querySelectorAll和forEach实现正确的polyfills：

function calculate() {
    document.querySelectorAll("#payments .checkBoxP").forEach(function (val, index, arr) {
        alert(arr[index].checked ? "it's on" : "nope");
    });
}

Answer 2

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

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

Answer 3

使用$(this).is(':checked')

检查是否检查当前元素

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

Fiddle DEMO

Answer 4

你也可以尝试这个

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

calculate();

<强> DEMO HERE

Answer 5

这是一个纯粹的JS版本

function calculate() {
    var checks = document.getElementsByClassName('checkBoxP');
    var checked_elms = [];
    checks.forEach(function(val, index, ar) {
        if(ar[index].checked) {
            checked_elms.push(ar[index]);
        }
    });
    console.log(checked_elms);
}

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

5 个答案: