checkbox使用示例

这里给您讲解一下"checkbox使用示例"的完整攻略，具体内容如下：

什么是checkbox

checkbox 是表单中的一个输入框，一般用于选择多个选项或确认某个事项是否被选中，常用于用户设置、数据筛选等场合。

checkbox的基本语法

checkbox的语法非常简单，包含一个 input 标签和一个 label 标签，具体如下：

<input type="checkbox" id="check">
<label for="check">checkbox</label>

其中，type 属性表示输入框的类型，为了使用 checkbox，这个属性需要设置为 checkbox。id 属性则是唯一标识符，for 属性则表示与输入框绑定的 label 元素的 id，通过绑定可以使用户通过点击 label 可以触发输入框。

checkbox的常见属性

checkbox 除了基本的属性外，还有一些常见的属性，这里列举几个：

checked: 用来设置是否默认选中
value: 设置 checkbox 的值，这个值通常用于提交表单或 JavaScript 操作
disabled: 禁用 checkbox
readonly: 只读的 checkbox，用户无法更改其状态

checkbox的使用示例

示例一：选中顶层分类时，子分类都选中

在实际开发中，如商品分类、优惠活动分类等情况下，我们可能会存在这样一种需求：当用户勾选顶层分类时，其下所有的子分类也会相应被选中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>checkbox使用示例</title>
</head>
<body>
  <h3>商品分类</h3>
  <div>
    <input type="checkbox" id="top-category">
    <label for="top-category">水果</label>
  </div>
  <div>
    <input type="checkbox" id="apple" class="sub-category top-category">
    <label for="apple">苹果</label>
  </div>
  <div>
    <input type="checkbox" id="banana" class="sub-category top-category">
    <label for="banana">香蕉</label>
  </div>
  <div>
    <input type="checkbox" id="orange" class="sub-category top-category">
    <label for="orange">橙子</label>
  </div>
  <br>
  <button onclick="selectAll()">全选</button>
  <button onclick="cancelAll()">取消全选</button>
  <script>
    function selectAll() {
      document.querySelectorAll('.top-category').forEach((el) => {
        el.checked = true
      })
    }

    function cancelAll() {
      document.querySelectorAll('.top-category').forEach((el) => {
        el.checked = false
      })
    }

    const topCategory = document.querySelector('#top-category')
    topCategory.addEventListener('click', function() {
      const subCategory = document.querySelectorAll('.sub-category')
      subCategory.forEach((el) => {
        el.checked = this.checked
      })
    })
  </script>
</body>
</html>

这个示例中，当用户勾选“水果”时，其下的所有子分类都会被自动勾选。同时，也可以通过“全选”和“取消全选”实现一键全选或取消。

示例二：提交表单时验证checkbox是否被选中

在一些需要用户进行勾选操作的场景中，我们可能还需要验证用户是否已经勾选。例如，用户在提交表单时可能需要勾选“同意协议”这样的信息。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>checkbox使用示例</title>
</head>
<body>
  <form onsubmit="submitForm()">
    <label for="agreement">
      <input type="checkbox" name="agreement" id="agreement" value="1"> 我已阅读并同意协议
    </label>
    <button type="submit">提交</button>
  </form>
  <script>
    function submitForm() {
      const agreement = document.querySelector('#agreement')
      if(!agreement.checked) {
        alert('请先同意协议')
        return false
      }
      // 这里可以继续处理表单提交的相关操作
    }
  </script>
</body>
</html>

在这个示例中，当用户没有勾选“同意协议”时，系统会弹出提示消息，并阻止表单的提交。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：checkbox使用示例 - Python技术站