取消选中复选框时,输出值保持不变。我该如何解决?

时间:2017-09-08 22:19:16

标签: javascript jquery html html5

function diagnose() {
  var add = 0;
  var age = parseFloat(document.getElementById('myNumber').value);
  var table = document.getElementById('table');
  var checkboxes = document.getElementsByClassName('addon');
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      add += parseFloat(checkboxes[i].value);
    }
  }
  var p = +add;
  var ad = 0;
  var checkboxe = document.getElementsByClassName('addon2');
  if (age < 3 && p >= 4) {

    for (var j = 0; j < checkboxe.length; j++) {
      if (checkboxe[j].checked) {
        ad += parseFloat(checkboxe[j].value);
      }
      var a = p + ad;

      if (a >= 5) {
        document.getElementById('total').innerHTML = "Clininacal diagnosis yes ";
      }
    }

  } else {
    document.getElementById('total').innerHTML = " Clininacal diagnosis no";
  }
}
document.getElementById('table').addEventListener('change', diagnose);
</head>
<body>
  Age: <input type="number" id="myNumber" class="no-spinners">
  <div id="table">
https://stackoverflow.com/posts/46125218/edit#  <input type="checkbox" name="Neonatal" value="1.0" class="addon">
  <label for="Neo">Neo</label></br>

  <input type="checkbox" name="F" value="1.0" class="addon">
  <label for="Feed">Feed</label></br>

  <input type="checkbox" name="W" value="1.0" class="addon">
  <label for="Weight">Weight</label></br>

  <input type="checkbox" name="Dysmorphic" value="1.0" class="addon">
  <label for="Char">Char</label></br>

  <input type="checkbox" name="Pub" value="1.0" class="addon">
  <label for="Pub">Smally</label></br>

  <input type="checkbox" name="Dev" value="1.0" class="addon">
  <label for="Dev">Dev</label></br>
<hr>
    <input type="checkbox" name="Lethargy" value=".5" class="addon2">
    <label for="Lethargy">Lethargy</label></br>

    <input type="checkbox" name="Typical" value=".5" class="addon2">
    <label for="TypicalBehavior">Typical</label></br>

    <input type="checkbox" name="Sleep" value=".5" class="addon2">
    <label for="Sleep">Sleep</label></br>

    <input type="checkbox" name="Short" value=".5" class="addon2">
    <label for="Short">Short</label></br>

    <input type="checkbox" name="Hypo" value=".5" class="addon2">
    <label for="Hypo">Hypo</label></br>

    <input type="checkbox" name="Small" value=".5" class="addon2">
    <label for="Small">Small</label></br>

    <input type="checkbox" name="Narrow" value=".5" class="addon2">
    <label for="Narrow">Narrow</label></br>

    <input type="checkbox" name="Esot" value=".5" class="addon2">
    <label for="Esot">Esot</label></br>

    <input type="checkbox" name="Thick" value=".5" class="addon2">
    <label for="Thick">Thick</label></br>

    <input type="checkbox" name="Speech" value=".5" class="addon2">
    <label for="Speech">Speech</label></br>

    <input type="checkbox" name="Skin" value=".5" class="addon2">
    <label for="Skin">Skin</label></br>
</div>
<span id="total"></span>

  </div>


</body>

所以我有这个代码。线上方每个输入有1个点,每条输入线下有0.5个点。对于正确的结果它至少需要5个点,但其中4个点必须来自1个点输入。例如,4点1和2.5点。我得到了它的工作,但取消选中复选框它仍然显示相同的字符串。那么我该如何解决呢? 谢谢。

2 个答案:

答案 0 :(得分:0)

您还需要在内部条件评估中添加else。 其他:

else {
    document.getElementById('total').innerHTML = " Clininacal diagnosis no";
}

整个代码:

function diagnose() {
    var add = 0;
    var age = parseFloat(document.getElementById('myNumber').value);
    var table = document.getElementById('table');
    var checkboxes = document.getElementsByClassName('addon');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            add += parseFloat(checkboxes[i].value);
        }
    }
    var p = +add;
    var ad = 0;
    var checkboxe = document.getElementsByClassName('addon2');
    if (age < 3 && p >= 4) {    
        for (var j = 0; j < checkboxe.length; j++) {
            if (checkboxe[j].checked) {
                ad += parseFloat(checkboxe[j].value);
            }
            var a = p + ad;
            if (a >= 5) {
                document.getElementById('total').innerHTML = "Clininacal diagnosis yes ";
            } else {
                document.getElementById('total').innerHTML = " Clininacal diagnosis no";
            }
        }  
    } else {
        document.getElementById('total').innerHTML = " Clininacal diagnosis no";
    }
}
document.getElementById('table').addEventListener('change', diagnose);

答案 1 :(得分:0)

仅在未达到else条件时才会显示表示否定答案的最后一个(age < 3 && p >= 4)块,因此当已经达到肯定答案时,无法重写它 - 快速和脏解决方案是复制(a >= 5)条件之后的最后一个或将结果存储在一个变量中并根据它确定结果消息:

  var positive = false;
  if (age < 3 && p >= 4) {

    for (var j = 0; j < checkboxe.length; j++) {
      if (checkboxe[j].checked) {
        ad += parseFloat(checkboxe[j].value);
      }
      var a = p + ad;

      if (a >= 5) {
        positive = true;
      }  
    }

  }

  if (positive) {
    document.getElementById('total').innerHTML = "Clininacal diagnosis yes ";
  }
  else {
    document.getElementById('total').innerHTML = " Clininacal diagnosis no";
  }