Question

为什么我的复选框更改为文字？

如何制作它我们勾选结果改变的任何复选框？谁能修复我的编码？另外，我希望我的复选框更整洁。我不希望它彼此如此接近复选框。

<head>
  <script>
    function fungsi() {

      var a = document.getElementById("subAnimal1").checked;
      var b = document.getElementById("subAnimal2").checked;
      var c = document.getElementById("subAnimal3").checked;
      var d = document.getElementById("subAnimal4").checked;
      var e = document.getElementById("subAnimal5").checked;

      if (a && b && c && d && e) {
        document.getElementById("subAnimal").innerHTML = "kiv1";
      } else if (a && b) {
        document.getElementById("subAnimal").innerHTML = "kiv2";
      } else if (b && a && c) {
        document.getElementById("subAnimal").innerHTML = "kiv13";
      } else if (a) {
        document.getElementById("subAnimal").innerHTML = "kiv4";
      } else {
        alert("In progress!");
      }
    }
  </script>
</head>

 <body>

    <script type="text/javascript">
      function ShowHideDiv(Animal) {
        var subAnimal = document.getElementById("subAnimal");
        subAnimal.style.display = Animal.checked ? "block" : "none";
        console.log(Animal.value)
        console.log("Text Inside LABEL:" + Animal.parentNode.textContent)
      }
    </script>

    <label for="Animal">
    <input type="checkbox" id="Animal" onclick="ShowHideDiv(this)" value="Animal"/> Animal 
</label>

<form>
<div id="subAnimal" style="display: none">

  <label> 
    <input type="checkbox" id="subAnimal1" onclick="fungsi()"/>123
  </label>


  <label>
	  <input type="checkbox" id="subAnimal2" onclick="fungsi()"/>456 
  </label>


  <label>
	  <input type="checkbox" id="subAnimal3" onclick="fungsi()"/>789 
  </label>

  <label>
    <input type="checkbox" id="subAnimal4" onclick="fungsi()"/>101112 
  </label>

  <label>
	  <input type="checkbox" id="subAnimal5" onclick="fungsi()"/>KIV 
  </label>

<p id="subAnimal"></p>

Answer 1

您在页面中有重复的身份subAnimal。

<div id="subAnimal" style="display: none">
...
<p id="subAnimal"></p>

这是修改后的版本：

<head>
<script>
function fungsi() {

  var a = document.getElementById("subAnimal1").checked;
  var b = document.getElementById("subAnimal2").checked;
  var c = document.getElementById("subAnimal3").checked;
  var d = document.getElementById("subAnimal4").checked;
  var e = document.getElementById("subAnimal5").checked;

  if (a && b && c && d && e) {
    document.getElementById("subAnimalx").innerHTML = "kiv1";
  } else if (a && b) {
    document.getElementById("subAnimalx").innerHTML = "kiv2";
  } else if (b && a && c) {
    document.getElementById("subAnimalx").innerHTML = "kiv13";
  } else if (a) {
    document.getElementById("subAnimalx").innerHTML = "kiv4";
  } else {
    alert("In progress!");
  }
}
</script>
</head>

<body>

<script type="text/javascript">
  function ShowHideDiv(Animal) {
    var subAnimal = document.getElementById("subAnimal");
    subAnimal.style.display = Animal.checked ? "block" : "none";
    console.log(Animal.value)
    console.log("Text Inside LABEL:" + Animal.parentNode.textContent)
  }
</script>

<label for="Animal">
<input type="checkbox" id="Animal" onClick="ShowHideDiv(this)" value="Animal"/> Animal 
</label>

<form>
<div id="subAnimal" style="display: none">

<label> 
<input type="checkbox" id="subAnimal1" onclick="fungsi()"/>123
</label>


<label>
  <input type="checkbox" id="subAnimal2" onclick="fungsi()"/>456 
</label>


<label>
  <input type="checkbox" id="subAnimal3" onclick="fungsi()"/>789 
</label>

<label>
<input type="checkbox" id="subAnimal4" onclick="fungsi()"/>101112 
</label>

<label>
  <input type="checkbox" id="subAnimal5" onclick="fungsi()"/>KIV 
</label>
</form>

<p id="subAnimalx"></p>

Answer 2

在两个id中都是重复的，请尝试下面的代码

<head>
  <script>
    function fungsi() {

      var a = document.getElementById("subAnimal1").checked;
      var b = document.getElementById("subAnimal2").checked;
      var c = document.getElementById("subAnimal3").checked;
      var d = document.getElementById("subAnimal4").checked;
      var e = document.getElementById("subAnimal5").checked;

      if (a && b && c && d && e) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv1";
      } else if (a && b) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv2";
      } else if (b && a && c) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv13";
      } else if (a) {
        document.getElementById("subAnimalLabel").innerHTML = "kiv4";
      } else {
        alert("In progress!");
      }
    }
  </script>
</head>

 <body>

    <script type="text/javascript">
      function ShowHideDiv(Animal) {
        var subAnimal = document.getElementById("subAnimal");
        subAnimal.style.display = Animal.checked ? "block" : "none";
        console.log(Animal.value)
        console.log("Text Inside LABEL:" + Animal.parentNode.textContent)
      }
    </script>

    <label for="Animal">
    <input type="checkbox" id="Animal" onclick="ShowHideDiv(this)" value="Animal"/> Animal 
</label>

<form>
<div id="subAnimal" style="display: none">

  <label> 
    <input type="checkbox" id="subAnimal1" onclick="fungsi()"/>123
  </label>


  <label>
	  <input type="checkbox" id="subAnimal2" onclick="fungsi()"/>456 
  </label>


  <label>
	  <input type="checkbox" id="subAnimal3" onclick="fungsi()"/>789 
  </label>

  <label>
    <input type="checkbox" id="subAnimal4" onclick="fungsi()"/>101112 
  </label>

  <label>
	  <input type="checkbox" id="subAnimal5" onclick="fungsi()"/>KIV 
  </label>

<p id="subAnimalLabel"></p>

为什么我的复选框更改为文本

2 个答案: