Question

如何将此代码从jQuery重写为vanilla JavaScript？我需要查看检查了多少个复选框。问题是我不知道如何从总分中删除未选中的复选框。

$(function () {
    var countChecked = function () {
        var n = $("input:checked").length;
        $(".output").text(n);
    };
    countChecked();

    $("input[type=checkbox]").on("click", countChecked);
});

接下来我该怎么做？

var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;

for (var i = 0; i < box.length; i++) {
    box[i].addEventListener('click', countIt);
    function countIt() {
        for (var i = 0; i < box.length; i++) {
            if ( box[i].checked ) {
                great++
                par.innerHTML = great;
                return
            }
        }
    }
}

Answer 1

每次计算时都需要重置great变量（例如，在countIt函数中移动它）。

var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');

function countIt() {
    var great = 0;
    for (var i = 0; i < box.length; i++) {
        if (box[i].checked) {
            great++;
        }
    }

    par.innerHTML = great;
}

for (var i = 0; i < box.length; i++) {
    box[i].addEventListener('click', countIt);
}

您还可以将countIt函数定义移出循环，并将innerHTML设置与{{1}}设置相同。

已选中的复选框数

1 个答案: