Checkbox group calc value

Question

У меня есть несколько групп флажков, каждая группа содержит по 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(); 
} 

Answer 1

Для исправить вашу проблему я использовать 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/

Answer 2

И без 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); 
});