Question

因此，我想使它像是选中该复选框一样，增加变量 hely ，如果未选中并被选中，则将其减小一。希望你能理解我的意思。（例如，现在 hely 设置为30，但是如果我选中此复选框，我想将其设置为29）

var hetfoTomb = document.forms['checkbox'].elements['hetfo'];
var keddTomb = document.forms['checkbox'].elements['kedd'];
var szerdaTomb = document.forms['checkbox'].elements['szerda'];
var csutortokTomb = document.forms['checkbox'].elements['csutortok'];
var button = document.querySelector(".button");
var change = document.querySelector("#change");
var kotelezo = 2;
var hetfoC = 0;
var keddC = 0;
var szerdaC = 0;
var csutortokC = 0;
var hely = 30;

function checkingFunction() {
  if (checkbox.enabled == true) {
    hely++;
    change.innerHTML = hely;
  } else {
    hely--;
    change.innerHTML = hely;
  }
}

button.addEventListener("click", function() {
  for (var i = 0; i < hetfoTomb.length; i++) {
    if (hetfoTomb[i].checked) {
      hetfoC++;
    }
  }
  for (var i = 0; i < keddTomb.length; i++) {
    if (keddTomb[i].checked) {
      keddC++;
    }
  }
  for (var i = 0; i < szerdaTomb.length; i++) {
    if (szerdaTomb[i].checked) {
      szerdaC++;
    }
  }
  for (var i = 0; i < csutortokTomb.length; i++) {
    if (csutortokTomb[i].checked) {
      csutortokC++;
    }
  }
  if (hetfoC >= kotelezo && keddC >= kotelezo && szerdaC >= kotelezo && csutortokC >= kotelezo) {
    alert("Tovább a véglegesítéshez!");
  } else {
    alert("Hiba");
  }
})

<!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><label><input type="checkbox" onclick="checkingFunction()" id="he2" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he3" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he1" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he4" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he5" name="hetfo">8</label></td>
          <td><label id="change"><input type="checkbox" id="he6" name="hetfo">8</label></td>
        </tr>
        <tr>
          <th>Kedd</th>
          <td><label><input type="checkbox" id="ke1" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke2" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke3" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke4" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke5" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke6" name="kedd">8</label></td>
        </tr>
        <tr>
          <th>Szerda</th>
          <td><label><input type="checkbox" id="sze1" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze2" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze3" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze4" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze5" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze6" name="szerda">8</label></td>
          <tr>
            <hr>
            <th>Csütörtök</th>
            <td><label><input type="checkbox" id="cs1" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs2" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs3" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs4" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs5" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs6" name="csutortok">8</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

问题是change标签包裹在复选框周围。因此，当您分配给change.innerHTML时，您也会覆盖该复选框。

您应该选中标签之外的复选框，并使用for属性将其链接。

<td><input type="checkbox" id="he6" name="hetfo"><label id="change" for="he6">8</label></td>

Answer 2

在您的职能中：

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

像这样将“已启用”属性更改为“已检查”：

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

如何仅在复选框下更改标签的文本？

2 个答案: