复选框的多选与反选以及下拉列表值的获取

Java佳

已于 2022-09-06 17:41:59 修改

阅读量159

点赞数 1

文章标签： javascript html

于 2022-09-01 13:23:09 首次发布

本文链接：https://blog.csdn.net/weixin_58166661/article/details/126639400

版权

这个示例展示了如何使用JavaScript实现HTML复选框的全选与反选功能，以及下拉列表中值的选择与获取。用户可以通过点击全选按钮选择所有复选框，点击反选按钮则会切换已选中的状态。同时，下拉列表的选择会在文本框中显示所选值。

摘要由CSDN通过智能技术生成

复选框的多选与反选666

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>反选与全选</title>
</head>
<body>
<form action="#" method="post">
  <input type="checkbox" name="hobby" value="wz">王者
  <input type="checkbox" name="hobby" value="xx">学习
  <input type="checkbox" name="hobby" value="sj">睡觉
  <input type="checkbox" name="hobby" value="ly">旅游<br>
  <input type="checkbox" id="qx">全选
  <input type="checkbox" id="fx">反选<br>

  <script type="text/javascript">
    /*全选*/
    var qx = document.getElementById("qx");
    qx.onclick = function () {
      var hobby = document.getElementsByName("hobby");
      for (var i = 0; i < hobby.length; i++) {
        hobby[i].checked = this.checked;
      }
    }
    /*反选*/
    var fx = document.getElementById("fx");
    fx.onclick=function () {
      var hobby2 = document.getElementsByName("hobby");
      for (var i = 0; i < hobby2.length; i++) {
        if (hobby2[i].checked) {
          hobby2[i].checked = false;
        } else {
          hobby2[i].checked = true;
        }
      }
    }
  </script>
</form>
</body>
</html>

下拉列表值的获取

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body>
<select id="sel">
    <option value="wz" name="hobby">王者</option>
    <option value="sj" name="hobby">睡觉</option>
    <option value="sk" name="hobby">上课</option>
    <option value="ly" name="hobby">旅游</option>
</select>
<br>
<input type="text" id="text">
<script type="text/javascript">
    document.getElementById("sel").onclick = function () {
        var hobby = document.getElementsByName("hobby");
        for (var i = 0; i < hobby.length; i++) {
            if (hobby[i].selected) {
                var text1 = document.getElementById("text");
                text1.value = hobby[i].innerHTML;
            }
        }
    }


</script>
</body>
</html>