jquery 复选框

jQuery 复选框操作

使用 jQuery 操作复选框（checkbox）可以通过多种方式实现，包括选中、取消选中、获取状态以及事件监听。以下是常见的操作方法和示例。

选中或取消选中复选框

通过设置 prop 方法修改复选框的 checked 属性。

// 选中复选框
$("#checkboxId").prop("checked", true);

// 取消选中复选框
$("#checkboxId").prop("checked", false);

获取复选框的选中状态

使用 prop 或 is 方法检查复选框是否被选中。

// 方法1：使用 prop
var isChecked = $("#checkboxId").prop("checked");

// 方法2：使用 is
var isChecked = $("#checkboxId").is(":checked");

if (isChecked) {
    console.log("复选框已选中");
} else {
    console.log("复选框未选中");
}

监听复选框状态变化

通过 change 事件监听复选框的状态变化。

$("#checkboxId").change(function() {
    if ($(this).is(":checked")) {
        console.log("复选框被选中");
    } else {
        console.log("复选框被取消选中");
    }
});

全选或取消全选多个复选框

通过类名或其他选择器批量操作多个复选框。

// 全选所有复选框
$(".checkboxClass").prop("checked", true);

// 取消全选所有复选框
$(".checkboxClass").prop("checked", false);

动态创建复选框并绑定事件

通过 jQuery 动态创建复选框并附加事件。

var checkbox = $("<input>", {
    type: "checkbox",
    id: "dynamicCheckbox",
    class: "checkboxClass"
});

checkbox.appendTo("#container");

checkbox.change(function() {
    console.log("动态复选框状态变化");
});

获取选中的复选框的值

遍历选中的复选框并获取其值。

$("input[type='checkbox']:checked").each(function() {
    console.log($(this).val());
});

以上方法涵盖了 jQuery 操作复选框的常见需求，包括选中、取消选中、事件监听以及批量操作。