复选框组计算值

Checkbox group calculate value

本文关键字：计算 复选框      更新时间：2023-09-26

我有几个复选框组，每个组包含3个复选框(1,X,2)。我想给每个组分配一个100%的值(33%到组中的每个复选框)。该值将根据选中了多少个复选框而移动。如果三个都被选中，那么他们每个人将拥有33%，但如果两个被选中，他们每个人将拥有50%，如果只有一个被选中，那么这个人将拥有100%。到目前为止，我只能详细说明复选框的长度，而不是值。我不太擅长Javascript，因此我还没有找到任何好的方法来做到这一点。我有一个带有硬编码值的JSFIDDLE:

JSFIDDLE 

<td>
  <input type="checkbox" name="1_1" class="checkbox" checked id="11" value="on" >
  <label for="11">1</label>
  <span id="Result"></span>
</td>
<td>
  <input type="checkbox" name="1_X" class="checkbox"checked id="1X" value="on">
  <label for="1X">X</label>
  <span>33%</span>
 </td>
 <td>
  <input type="checkbox" name="1_2" class="checkbox" checked id="12" value="on">
  <label for="12">2</label>
  <span>33%</span>
</td>
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
  function check() {
    var p = input.checked ? "100" : "0";
    document.getElementById('result').innerHTML = p+'%';
  }
input.onchange = check;
check();
}

为解决您的问题，我使用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链接:https://jsfiddle.net/xc8xt682/3/

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

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);
});
相关文章：