正文

轻松掌握：JavaScript全选表单元素的简单方法与实战案例

/0 浏览量
0331

在网页开发中，有时候我们需要实现全选表单元素的功能，比如全选复选框、全选单选按钮等。这不仅可以提升用户体验，还能让开发者编写出更加高效和简洁的代码。本文将为你介绍如何使用JavaScript轻松实现全选表单元素，并提供实战案例供你参考。

一、JavaScript全选表单元素的方法

1.1 使用checked属性

最简单的方法是通过设置checked属性来实现全选。以下是一个全选复选框的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全选复选框示例</title>
</head>
<body>
<form action="#" method="post">
  <input type="checkbox" name="item" value="1" id="item1"> 项目1<br>
  <input type="checkbox" name="item" value="2" id="item2"> 项目2<br>
  <input type="checkbox" name="item" value="3" id="item3"> 项目3<br>
  <input type="button" value="全选" onclick="selectAll()">
</form>
<script>
function selectAll() {
  var checkboxes = document.getElementsByName('item');
  for (var checkbox of checkboxes) {
    checkbox.checked = true;
  }
}
</script>
</body>
</html>

1.2 使用querySelectorAll和forEach

如果你需要全选多个不同类型的表单元素，可以使用querySelectorAll和forEach方法。以下是一个全选复选框和单选按钮的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全选复选框和单选按钮示例</title>
</head>
<body>
<form action="#" method="post">
  <input type="checkbox" name="item" value="1" id="item1"> 项目1<br>
  <input type="radio" name="gender" value="male" id="male"> 男<br>
  <input type="radio" name="gender" value="female" id="female"> 女<br>
  <input type="button" value="全选" onclick="selectAll()">
</form>
<script>
function selectAll() {
  var checkboxes = document.querySelectorAll('input[type="checkbox"], input[type="radio"]');
  checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
  });
}
</script>
</body>
</html>

二、实战案例

2.1 实现购物车全选功能

以下是一个实现购物车全选功能的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>购物车全选功能示例</title>
</head>
<body>
<form action="#" method="post">
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" id="selectAll"></th>
        <th>商品名称</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="item" value="1"></td>
        <td>商品1</td>
        <td>100元</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="item" value="2"></td>
        <td>商品2</td>
        <td>200元</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="item" value="3"></td>
        <td>商品3</td>
        <td>300元</td>
      </tr>
    </tbody>
  </table>
  <input type="button" value="全选" onclick="selectAll()">
</form>
<script>
function selectAll() {
  var selectAllCheckbox = document.getElementById('selectAll');
  var itemCheckboxes = document.getElementsByName('item');
  for (var checkbox of itemCheckboxes) {
    checkbox.checked = selectAllCheckbox.checked;
  }
}
</script>
</body>
</html>

2.2 实现多选框全选功能

以下是一个实现多选框全选功能的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多选框全选功能示例</title>
</head>
<body>
<form action="#" method="post">
  <input type="checkbox" name="item" value="1" id="item1"> 项目1<br>
  <input type="checkbox" name="item" value="2" id="item2"> 项目2<br>
  <input type="checkbox" name="item" value="3" id="item3"> 项目3<br>
  <input type="button" value="全选" onclick="selectAll()">
</form>
<script>
function selectAll() {
  var checkboxes = document.getElementsByName('item');
  for (var checkbox of checkboxes) {
    checkbox.checked = true;
  }
}
</script>
</body>
</html>

通过以上示例，你可以轻松掌握JavaScript全选表单元素的方法，并将其应用到实际项目中。希望本文对你有所帮助！

-- 展开阅读全文 --