I am currently working on a project that involves multiple checkbox groups, with each group containing 3 checkboxes labeled as (1, X, 2). My goal is to assign a value of 100% to each group, distributed evenly among the checkboxes within it. The distribution varies based on how many checkboxes are checked - if all 3 are checked, each receives 33%; if two are checked, they get 50% each; and if only one is checked, that checkbox gets 100%. I have been struggling with implementing this functionality as I primarily focus on the appearance of the checkboxes rather than their values. My JavaScript skills are limited, which makes it difficult for me to find a suitable solution. Currently, I have hard-coded values in a 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();
}