js选中有对勾效果

在JavaScript中实现选中时有对勾（勾选）效果，通常涉及到HTML的复选框（checkbox）元素与CSS样式的结合使用。以下是基础概念、优势、类型、应用场景以及实现方法的详细解释：

基础概念

复选框（Checkbox）：HTML中的一个输入元素，允许用户在一组选项中选择一个或多个选项。
CSS伪类：:checked伪类用于选择被选中的表单元素。

优势

用户体验：直观显示用户的选择状态，提高交互的明确性。
界面美观：通过自定义样式，可以使界面更加美观和一致。

类型

基本复选框：标准的HTML复选框。
自定义复选框：通过CSS隐藏原生复选框，使用伪元素模拟对勾效果。

应用场景

表单验证：确认用户是否同意条款或选择了特定选项。
多选项选择：允许用户从多个选项中选择一个或多个。

实现方法

以下是一个简单的示例，展示如何使用HTML和CSS实现自定义的对勾效果：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Checkbox</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <label class="checkbox-container">One
      <input type="checkbox">
      <span class="checkmark"></span>
    </label>
</body>
</html>

CSS (styles.css)

/* 隐藏原生复选框 */
.checkbox-container input {
  display: none;
}

/* 创建自定义复选框 */
.checkbox-container .checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 4px;
  position: relative;
  margin-right: 10px;
}

/* 当复选框被选中时改变背景颜色 */
.checkbox-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* 创建对勾 */
.checkbox-container .checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

/* 当复选框被选中时显示对勾 */
.checkbox-container input:checked ~ .checkmark::after {
  display: block;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

解释

HTML部分：使用<label>标签包裹复选框和自定义的<span>元素，这样点击文本也会切换复选框的状态。
CSS部分：
- 隐藏原生的复选框。
- 使用.checkmark类创建一个自定义的复选框样式。
- 使用:checked伪类和相邻兄弟选择器(~)来改变选中状态下的样式。
- 使用伪元素::after来创建对勾形状，并在选中时显示。