Блог

У меня есть следующий код, состоящий из 3 частей — 2 наборов флажков и некоторого автоматически отображаемого текста, зависящего от 2-х флажков.

1. Верхний ряд флажков, которые предоставляют общее числовое значение, чтобы разрешить

• общее значение для автоматического изменения ячейки по умолчанию (красного) цвета на желтый, когда значение равно 40 , и зеленый, когда оно достигает 60 , и возвращается обратно в обратном порядке (т. Е. Если ниже 60, то возвращается желтый, а ниже 40 возвращается к цвету по умолчанию).,
• автоматически включите/установите один из 2-го набора флажков (например, «Опция 2»), когда значение достигнет, скажем, 40 (автоматически удалите галочку, если она опустится ниже 40 и т. Д.)
• автоматически включите/установите еще один из 2-х флажков (например, «Опция 4»), когда значение достигнет 60 (автоматическое удаление, если оно упадет ниже этого значения).

2. Убедитесь, что когда 2-й флажок автоматически включен с 1) выше, текст автоматически отображается (как если бы он был отмечен вручную), и если он автоматически снят с 1) автоматическое удаление текста,
3. По-прежнему разрешайте вручную настраивать 2-е флажки и отображать/не отображать текст (т. Е., если автоматически включено, как указано выше, разрешить снятие флажков вручную для удаления текста и т. Д.)

 function addTotals() {  var input = document.getElementsByName("score");  var total = 0;  for (var i = 0; i lt; 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";  } } 

 lt;table id="scorecard" border="1"gt; lt;trgt;  lt;tdgt;lt;input name="score" value="40" type="checkbox" onclick="addTotals()" /gt;Impossiblelt;/tdgt;  lt;tdgt;lt;input name="score" value="30" type="checkbox" onclick="addTotals()" /gt;Hardlt;/tdgt;  lt;tdgt;lt;input name="score" value="20" type="checkbox" onclick="addTotals()" /gt;Mediumlt;/tdgt;  lt;tdgt;lt;input name="score" value="10" type="checkbox" onclick="addTotals()" /gt;Easylt;/tdgt;  lt;td bgcolor="red" rowspan="2" style="width:90px;text-align:center" gt;lt;input style="width:60px;text-align:center" value="0" readonly="readonly" type="text" name="total" /gt;lt;/tdgt;  lt;/trgt; lt;/tablegt;  lt;table id="report" border="1"gt; lt;trgt;  lt;tdgt;lt;input type="checkbox" id="box1" onclick="displayText(this,'textBox1')"gt;lt;label for="box1"gt;Option 1lt;/labelgt;lt;/tdgt;  lt;tdgt;lt;input type="checkbox" id="box2" onclick="displayText(this,'textBox2')"gt;lt;label for="box2"gt;Option 2lt;/labelgt;lt;/tdgt;  lt;tdgt;lt;input type="checkbox" id="box3" onclick="displayText(this,'textBox3')"gt;lt;label for="box3"gt;Option 3lt;/labelgt;lt;/tdgt;  lt;tdgt;lt;input type="checkbox" id="box4" onclick="displayText(this,'textBox4')"gt;lt;label for="box4"gt;Option 4lt;/labelgt;lt;/tdgt;  lt;tdgt;lt;input type="checkbox" id="box5" onclick="displayText(this,'textBox5')"gt;lt;label for="box5"gt;Option 5lt;/labelgt;lt;/tdgt; lt;/trgt; lt;/tablegt;  lt;p id="main" style="display:block" contenteditable="true"gt; lt;span id="textBox1" style="display:none"gt;Pears.lt;/spangt; lt;span id="textBox2" style="display:none"gt;Apples.lt;/spangt; lt;span id="textBox3" style="display:none"gt;Oranges.lt;/spangt; lt;span id="textBox4" style="display:none"gt;Lemons.lt;/spangt; lt;span id="textBox5" style="display:none"gt;Excel.lt;/spangt; lt;pgt; 

** редактировать: (используя только javascript и html на 1 странице (без БД, внешних и т.д.)). У меня возникли проблемы с каскадным эффектом onclick при изменении цвета и установке флажков, особенно при разворотах, и мой код полностью испортился 🙁

Основываясь на общем значении, которое у вас уже есть, вы можете выбрать цвет с помощью простого условия «если бы», и, пройдя через каждый флажок от минимального значения до максимального, вы можете продолжить решать, нужно ли проверять флажок или нет

 function addTotals() { var input = document.getElementsByName("score"); var total = 0; for (var i = 0; i lt; 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 gt;= 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 }