Question

所以我想做一些复选框。如果我检查其中之一，则该人的计数器应减一（它有一个空格变量，因此如果有人选中该复选框，则该计数器应减一）另外，如果他们取消选择，我想增加空间，因此将空格（hely）变量增加一。现在，我的代码只会不断增加，而不会减少。

（很抱歉，代码的格式，但是由于stackoverflow提出了一个新的问题询问页面，因此像以前那样复制我的代码并不容易...）

var hely = 0;

function checkingFunction() {
  if (checkbox.checked == true) {
    hely--;
    change.innerHTML = hely;
  } else {
    hely++;
    change.innerHTML = hely;
  }
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Piarista Kollégium - Stúdiumi jelentkezés</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

  <div class="topnav">

    <div class="topnav-centered">
      <a href="#home" class="active">Jelentkezés</a>
    </div>

    <a href="updates.html">Frissítések</a>

    <div class="topnav-right">
      <a href="login.html">Bejelentkezés</a>
    </div>
  </div>
  <div id="head">
    <img src="logo.png">
  </div>
  <h2>Üdvözöllek, XY!</h2>
  </div>


  <form class="checkbox" id="checkbox" action="">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>1.</th>
          <th>2.</th>
          <th>3.</th>
          <th>4.</th>
          <th>5.</th>
          <th>6.</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>Hétfő</th>
          <td><input type="checkbox" id="he1" onclick="checkingFunction()" name="hetfo"><label id="change" for="he1"> 
    </label></td>
          <td><input type="checkbox" id="he2" onclick="checkingFunction()" name="hetfo"><label id="change" for="he2"> 
    </label></td>
          <td><input type="checkbox" id="he3" onclick="checkingFunction()" name="hetfo"><label id="change" for="he3"> 
    </label></td>
          <td><input type="checkbox" id="he4" onclick="checkingFunction()" name="hetfo"><label id="change" for="he4"> 
    </label></td>
          <td><input type="checkbox" id="he5" onclick="checkingFunction()" name="hetfo"><label id="change" for="he5"></label>
          </td>
          <td><input type="checkbox" id="he6" onclick="checkingFunction()" name="hetfo"><label id="change" for="he6"> 
    </label></td>
        </tr>
      </tbody>
    </table>
    <input type="submit" class="button" value="Jelentkezés elküldése">
  </form>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

如果我选中一个复选框，则其计数器应减一（它具有一个空间变量，因此如果有人选中该复选框，则其应减一）另外，如果他们取消选中该复选框，我想增加空间，因此将空格（hely）变量增加一。

Answer 1

您有多个id="change"标签。执行此操作时，变量change包含所有变量的集合，并且分配给change.innerHTML不会更新任何变量。

变量checkbox指向<form id="checkbox">。由于表单没有checked属性，因此checkbox.checked == true永远不会为真，因此hely总是递增。

如果要检查用户选中的框的值，则需要使用onclick="checkingFunction(this)"将其作为参数传递给函数。

如果要更新与该复选框关联的标签，则可以使用checkbox.nextSiblingElement来引用它。

var hely = 0;

function checkingFunction(checkbox) {
  var change = checkbox.nextElementSibling;
  if (checkbox.checked) {
    hely--;
  } else {
    hely++;
  }
  change.innerHTML = hely;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Piarista Kollégium - Stúdiumi jelentkezés</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

  <div class="topnav">

    <div class="topnav-centered">
      <a href="#home" class="active">Jelentkezés</a>
    </div>

    <a href="updates.html">Frissítések</a>

    <div class="topnav-right">
      <a href="login.html">Bejelentkezés</a>
    </div>
  </div>
  <div id="head">
    <img src="logo.png">
  </div>
  <h2>Üdvözöllek, XY!</h2>
  </div>


  <form class="checkbox" id="checkbox" action="">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>1.</th>
          <th>2.</th>
          <th>3.</th>
          <th>4.</th>
          <th>5.</th>
          <th>6.</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>Hétfő</th>
          <td><input type="checkbox" id="he1" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he1"> 
    </label></td>
          <td><input type="checkbox" id="he2" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he2"> 
    </label></td>
          <td><input type="checkbox" id="he3" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he3"> 
    </label></td>
          <td><input type="checkbox" id="he4" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he4"> 
    </label></td>
          <td><input type="checkbox" id="he5" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he5"></label>
          </td>
          <td><input type="checkbox" id="he6" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he6"> 
    </label></td>
        </tr>
      </tbody>
    </table>
    <input type="submit" class="button" value="Jelentkezés elküldése">
  </form>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

为什么这段代码没有降低hely的价值？

1 个答案: