Javascript 复选框组计算值

我有几个复选框组，每个组包含3个复选框（1，X，2）。 我想为每个组分配100%的值（组中的每个复选框分配33%）。该值将根据选中的复选框数量移动。如果全部3个都被选中，那么它们将各占33%，但如果两个都被选中，那么它们将各占50%，如果只选中了一个，那么这一个将拥有100%。 到目前为止，我只能详细说明复选框的长度，而不是值。我不太擅长Javascript，因此我还没有找到任何好的方法来实现这一点。我有一个带有硬编码值的JSFIDLE：

1.
X
33%
2.
33%
window.onload=函数（）{
var input=document.querySelector（'input[type=checkbox]）；
函数检查（）{
var p=输入。选中“100”：“0”；
document.getElementById（'result'）。innerHTML=p+'%'；
}
input.onchange=检查；
检查（）；
}

为了解决您的问题，我使用Jquery并将处理程序添加到复选框中，并对选中的输入进行计数

$("input[type=checkbox]").click(function(){
    var arrayId=$(this).attr("name").split("_");
    var numberId=arrayId[0];
    var percentage=Math.floor(100/$("input[name*='"+numberId+"_']:checked").length);
    console.log(percentage);
    $("input[name*='"+numberId+"_']").parent().children("span").html("0%");
    $("input[name*='"+numberId+"_']:checked").parent().children("span").html(percentage+"%");
});

---

链接JsFiddle:

为了解决您的问题，我使用Jquery并将处理程序添加到复选框中，并对选中的输入进行计数

$("input[type=checkbox]").click(function(){
    var arrayId=$(this).attr("name").split("_");
    var numberId=arrayId[0];
    var percentage=Math.floor(100/$("input[name*='"+numberId+"_']:checked").length);
    console.log(percentage);
    $("input[name*='"+numberId+"_']").parent().children("span").html("0%");
    $("input[name*='"+numberId+"_']:checked").parent().children("span").html(percentage+"%");
});

---

链接JSFIDLE:

如果没有jquery，它只会更详细一点。：）我的答案可能更好，但只是加上我的，因为我是在他回答的时候写的

var cells = Array.prototype.slice.call(document.querySelectorAll('td')),
    calculate = function () {
        var value = ['100%', '50%', '33%'][cells.filter(function (cell) {
                return cell.querySelector('input').checked;
            }).length - 1];
        cells.forEach(function (cell) {
            var span =  cell.querySelector('span');
            if (cell.querySelector('input').checked) span.textContent = value;
            else span.textContent = '0%';
        });
    };
cells.forEach(function (cell) {
    cell.querySelector('input').addEventListener('click', calculate);
});

---

如果没有jquery，它只会更加冗长一点。：）我的答案可能更好，但只是加上我的，因为我是在他回答的时候写的

var cells = Array.prototype.slice.call(document.querySelectorAll('td')),
    calculate = function () {
        var value = ['100%', '50%', '33%'][cells.filter(function (cell) {
                return cell.querySelector('input').checked;
            }).length - 1];
        cells.forEach(function (cell) {
            var span =  cell.querySelector('span');
            if (cell.querySelector('input').checked) span.textContent = value;
            else span.textContent = '0%';
        });
    };
cells.forEach(function (cell) {
    cell.querySelector('input').addEventListener('click', calculate);
});

---

对不起，这不是我最新的JSFIDLE，我添加了我的Javascript代码对不起，这不是我最新的JSFIDLE，我添加了我的Javascript代码谢谢@LTasty！就像一个符咒：）避免使用属性选择器，它是执行最慢的属性之一。我可以看到，对于所有的

复选框

，都有一个

类

选择器，它比

属性

快得多。我的建议是：使用属性和伪类选择器作为遍历dom的最后一个选项。参考：谢谢@LTasty！就像一个符咒：）避免使用属性选择器，它是执行最慢的属性之一。我可以看到，对于所有的

复选框

，都有一个

类

选择器，它比

属性

快得多。我的建议是：使用属性和伪类选择器作为遍历dom的最后一个选项。裁判：