如何根据仅使用javascript选中的复选框添加/删除html元素?

戴维·C

我希望仅在选中表单中的复选框时才会显示html。我该如何仅使用javascript?

<html>
<head><title>test</title></head>
<body>
  <form>
    <input type="checkbox" id="exampleCheckbox">
  </form>
  <div id="toggleElement"></div>
</body>
</html>

编辑:我已经尝试过,但是未取消选择后它不会消失:

<html>
<head><title>test</title></head>
<body>
  <form>
    <input type="checkbox" id="exampleCheckbox" onclick="showDiv()">
  </form>
  <div id="toggleElement"></div>
  <script>
  function showDiv() {
    document.getElementById("toggleElement").innerHTML = "Hello world!";
  }
  </script>
</body>
</html>
赛义德·霍洛夫

您可以使用eventlistener来做到这一点:

document.getElementById("checkbox").addEventListener('change',function() {
        var hidden = document.getElementById("html");
        if (this.checked) {
            hidden.style.display = "block";
        } else {
            hidden.style.display = "none";
        }
    })

http://jsfiddle.net/j7wdkd7a/3/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

HTML复选框-仅允许选中一个复选框

来自分类Dev

如何使用JavaScript或jquery选中/取消选中复选框?

来自分类Dev

如何使用JavaScript根据复选框重置滑块值?

来自分类Dev

选中后如何删除复选框

来自分类Dev

使用jQuery选中/未选中复选框上的添加/删除值

来自分类Dev

如果选中复选框,如何添加元素;如果未选中,如何将其删除?

来自分类Dev

选中复选框时,使用innerHTML添加的文本未选中时不会删除

来自分类Dev

使用功能删除选中的复选框元素

来自分类Dev

当使用jQuery中的复选框未选中元素时,如何删除元素?

来自分类Dev

如何在复选框中添加/删除选中的属性?

来自分类Dev

如何获取Javascript中仅选中的复选框的值?

来自分类Dev

如何使用RSelenium选中复选框?

来自分类Dev

选中复选框时如何将元素添加到数组

来自分类Dev

如何根据选中的复选框禁用复选框?

来自分类Dev

取消选中数组中的复选框后如何删除元素?

来自分类Dev

如何根据选中的复选框读取输入值?

来自分类Dev

如何设置未选中的复选框1选中复选框2并设置未选中的复选框2使用脚本选中复选框1时?

来自分类Dev

如何使用javascript仅打印选定的复选框?

来自分类Dev

如何使用JavaScript根据复选框重置滑块值?

来自分类Dev

如何仅根据CSS是否选中复选框来更改元素的不透明度?

来自分类Dev

通过选中复选框来添加或删除PHP变量

来自分类Dev

如何根据选中的复选框数量显示/隐藏元素?

来自分类Dev

如果选中复选框,如何添加元素;如果未选中,如何将其删除?

来自分类Dev

添加/删除表单元素,取决于是否选中了复选框

来自分类Dev

选中/取消选中复选框以使用 javascript 显示/隐藏输入文件元素

来自分类Dev

如何根据选中的复选框powerbuilder启用按钮?

来自分类Dev

如何根据在 html 表中未选中的复选框添加和删除 id?

来自分类Dev

使用 Javascript 选中/取消选中复选框

来自分类Dev

javascript & html - 如何删除复选框

Related 相关文章

  1. 1

    HTML复选框-仅允许选中一个复选框

  2. 2

    如何使用JavaScript或jquery选中/取消选中复选框?

  3. 3

    如何使用JavaScript根据复选框重置滑块值?

  4. 4

    选中后如何删除复选框

  5. 5

    使用jQuery选中/未选中复选框上的添加/删除值

  6. 6

    如果选中复选框,如何添加元素;如果未选中,如何将其删除?

  7. 7

    选中复选框时,使用innerHTML添加的文本未选中时不会删除

  8. 8

    使用功能删除选中的复选框元素

  9. 9

    当使用jQuery中的复选框未选中元素时,如何删除元素?

  10. 10

    如何在复选框中添加/删除选中的属性?

  11. 11

    如何获取Javascript中仅选中的复选框的值?

  12. 12

    如何使用RSelenium选中复选框?

  13. 13

    选中复选框时如何将元素添加到数组

  14. 14

    如何根据选中的复选框禁用复选框?

  15. 15

    取消选中数组中的复选框后如何删除元素?

  16. 16

    如何根据选中的复选框读取输入值?

  17. 17

    如何设置未选中的复选框1选中复选框2并设置未选中的复选框2使用脚本选中复选框1时?

  18. 18

    如何使用javascript仅打印选定的复选框?

  19. 19

    如何使用JavaScript根据复选框重置滑块值?

  20. 20

    如何仅根据CSS是否选中复选框来更改元素的不透明度?

  21. 21

    通过选中复选框来添加或删除PHP变量

  22. 22

    如何根据选中的复选框数量显示/隐藏元素?

  23. 23

    如果选中复选框,如何添加元素;如果未选中,如何将其删除?

  24. 24

    添加/删除表单元素,取决于是否选中了复选框

  25. 25

    选中/取消选中复选框以使用 javascript 显示/隐藏输入文件元素

  26. 26

    如何根据选中的复选框powerbuilder启用按钮?

  27. 27

    如何根据在 html 表中未选中的复选框添加和删除 id?

  28. 28

    使用 Javascript 选中/取消选中复选框

  29. 29

    javascript & html - 如何删除复选框

热门标签

归档