jeudi 6 août 2015

Checkbox group calculate value

I have several checkbox groups, each group contains 3 checkboxes each (1,X,2). I want to assign a 100% value to each group (33% to each checkbox in the group). The value will move depending on how many checkboxes are checked. If all 3 are checked then they will have 33% each, but if two are checked they will have 50% each and if only one is checked, then that one will own 100%. So far I'm only able to elaborate with the lenght of the checkbox and not the value. I'm not that good with Javascript, and therefor I haven't found any good way of doing this. I have a JSFIDDLE with hard coded values:

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();
}




Aucun commentaire:

Enregistrer un commentaire