jQuery 复选框 - Javascript

jQuery 复选框是一种能够使用户进行多选的 UI 组件。通过 jQuery 和 Javascript，可以快速地实现复选框的功能和样式。

1. 基本用法

在 HTML 中，使用 <input type="checkbox"> 即可创建复选框。选中和未选中状态分别对应 checked 和 unchecked。

利用 jQuery，可以监听复选框的状态变化。

$('input[type="checkbox"]').on('change', function() {
  if ($(this).is(':checked')) {
    // 复选框被选中
  } else {
    // 复选框未被选中
  }
});

2. 全选/取消全选

为了方便用户操作，复选框通常提供全选/取消全选的功能。实现方法如下：

// 全选
$('#check-all').on('click', function() {
  $('input[type="checkbox"]').prop('checked', true);
});

// 取消全选
$('#uncheck-all').on('click', function() {
  $('input[type="checkbox"]').prop('checked', false);
});

3. 属性和方法

属性

• checked：复选框是否被选中，返回 true 或 false
• disabled：复选框是否被禁用，返回 true 或 false
• val()：获取或设置复选框的值

方法

• prop()：设置或读取 DOM 属性。例如，$('input[type="checkbox"]').prop('checked', true) 设置复选框为选中状态
• is(':checked')：判断是否被选中，返回 true 或 false
• attr()：设置或读取 HTML 属性。与 prop() 不同的是，attr() 返回的是字符串，而不是布尔值

4. 样式

通过设置样式，可以使复选框更加美观。以下是一些实用的样式：

/* 隐藏原始复选框 */
input[type="checkbox"] {
  display: none;
}

/* 定制复选框 */
label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-right: 15px;
  cursor: pointer;
  font-size: 22px;
  user-select: none; /* 禁止用户选中文本 */
}

label:before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

/* 选中状态 */
label:after {
  content: '\2714';
  display: inline-block;
  position: absolute;
  left: 5px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 12px;
  background-color: #428bca;
  border-radius: 2px;
  transform: scale(0); /* 初始不可见 */
}

/* 鼠标悬浮在复选框上的样式 */
label:hover:before {
  border-color: #2a6496;
}

/* 选中状态的样式 */
input[type="checkbox"]:checked + label:after {
  transform: scale(1);
}

/* 禁用状态的样式 */
input[type="checkbox"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}

5. 实例

最后，我们来看一个实例，其中包含多个复选框和全选/取消全选按钮：

Codepen 链接