Checkbox sum total colour changer + auto-tick checkbox in second group

user_6400605 0
Viewed 38

I have the following code that has 3 parts - 2 sets of checkboxes and some auto-displaying text dependant on the 2nd checkboxes.

  1. Top row of checkboxes that provide a total numerical value, to allow
  • the total value to automatically change the default (red) coloured cell to yellow when the value is 40+ and green when it reaches 60+, and reverts back in reverse (ie if below 60 then goes back to yellow, and below 40 goes back to default colour),
  • automatically enable/tick one of the 2nd set of checkboxes (eg 'Option 2') when the value reaches say 40+ (auto-remove the tick if it falls below 40, etc.)
  • automatically enable/tick another of the 2nd checkboxes (eg 'Option 4') when the value reaches 60+ (auto-remove if it falls below that value)
  1. Ensure when the 2nd check box is auto-enabled from 1) above, the text auto-appears (as though it was manually ticked), and if auto-unticked from above 1) auto-remove the text,
  2. Still allow the 2nd check boxes to be manually adjusted and display/not-display the text (ie if auto-enabled as above, allow manual unticking to remove the text, etc.)

function addTotals() {
    var input = document.getElementsByName("score");
    var total = 0;
    for (var i = 0; i < input.length; i++) {
        if (input[i].checked) {
            total += parseFloat(input[i].value);
        }
    }
    document.getElementsByName("total")[0].value = "" + total.toFixed(0);
}


function displayText(checkBoxElm,textBoxId) {
  let textBox = document.getElementById(textBoxId);
  if (checkBoxElm.checked){
    textBox.style.display = "block";
  } else {
    textBox.style.display = "none";
  }
}
<table id="scorecard" border="1">
<tr>
    <td><input name="score" value="40" type="checkbox" onclick="addTotals()" />Impossible</td>
    <td><input name="score" value="30" type="checkbox" onclick="addTotals()" />Hard</td>
    <td><input name="score" value="20" type="checkbox" onclick="addTotals()" />Medium</td>
    <td><input name="score" value="10" type="checkbox" onclick="addTotals()" />Easy</td>
    <td bgcolor="red" rowspan="2" style="width:90px;text-align:center" ><input style="width:60px;text-align:center" value="0" readonly="readonly" type="text" name="total" /></td>

</tr>
</table>

<table id="report" border="1">
<tr>
    <td><input type="checkbox" id="box1" onclick="displayText(this,'textBox1')"><label for="box1">Option 1</label></td>
    <td><input type="checkbox" id="box2" onclick="displayText(this,'textBox2')"><label for="box2">Option 2</label></td>
    <td><input type="checkbox" id="box3" onclick="displayText(this,'textBox3')"><label for="box3">Option 3</label></td>
    <td><input type="checkbox" id="box4" onclick="displayText(this,'textBox4')"><label for="box4">Option 4</label></td>
    <td><input type="checkbox" id="box5" onclick="displayText(this,'textBox5')"><label for="box5">Option 5</label></td>
</tr>
</table>

<p id="main" style="display:block" contenteditable="true">
<span id="textBox1" style="display:none">Pears.</span>
<span id="textBox2" style="display:none">Apples.</span>
<span id="textBox3" style="display:none">Oranges.</span>
<span id="textBox4" style="display:none">Lemons.</span>
<span id="textBox5" style="display:none">Excel.</span>
<p>

** edit: (using only javascript and html on 1 page (no db's, externals, etc.)). I was having issues with the onclick cascading effect of colour changing and checkbox ticking, especially on the reversals, and my code got all messed up :(

html javascript
1 Answers

Based on the total value which you already have, you can decide the color by simple if-else condition, and by traveling through each checkbox from min value to max you can go on deciding if checkbox needs to be checked or not

function addTotals() {
var input = document.getElementsByName("score");
var total = 0;
for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
        total += parseFloat(input[i].value);
    }
}
document.getElementsByName("total")[0].value = "" + total.toFixed(0);
for(travel through each checkbox from min value to max)
{
  if(total >= checkbox value)
  {
    total= total - checkox value
    checkbox.checked=true
  }
  else{
   checkbox.checked=false
  }
}
if(condition1)
{
  target.bg = "color1"
}
else if(condition2)
{
  target.bg = "color2"
}
so on for rest
}
user_173567470
Related