Jquery实现复选框的选中和取消

复选框 · 浏览次数 : 209

小编点评

**复选框动态加载的内容：** 1. 在页面上添加一个动态加载的复选框，内容是从数据库中加载的。 2. 使用 JavaScript 代码在页面加载完成后动态添加一个事件处理程序。 3. 该事件处理程序中首先获取所有具有 `name="ck"` 属性的复选框。 4. 遍历所有复选框，并将 `checked` 属性设置为 `true` 或 `false` 的值，根据数据库中复选框的值进行设置。 **代码示例：** ```javascript // 动态加载的复选框 ID const inputc = $("#inputc"); // 获取所有复选框 const ckBoxes = inputc.find("input[name='ck']"); // 为所有复选框设置默认值 ckBoxes.prop("checked", false); // 动态设置复选框的值 function updateCheckboxState() { // 获取当前复选框的值 const currentChecked = inputc.prop("checked"); // 为所有复选框设置新的值 ckBoxes.prop("checked", currentChecked); } // 页面加载完成后运行事件处理程序 $(document).ready(updateCheckboxState); // 为复选框添加事件处理程序 inputc.click(function () { updateCheckboxState(); }); ``` **注意：** * `name="ck"` 属性在复选框的 HTML 标签中必须与数据库中复选框的值一致。 * `updateCheckboxState()` 函数的目的是仅设置复选框的初始状态。如果您需要在页面加载完成后设置复选框的值，请使用不同的方法。

正文

复选框的选中与取消

我在网上看了好多关于这个问题的解答，好多都是一两个按钮的触发事件，有的甚至没有任何效果，经过自己的调试发现这个方法好用一点：
在这里插入图片描述

首先我在页面上添加了这样一个复选框

我的在这里插入图片描述

我的复选框是动态加载的，内容是从数据库加载的。

在这里插入图片描述

显示的效果图就是以上这样的。

代码

$("#inputc").click(function () {
            $("input[name='ck']").prop("checked", $("#inputc").prop("checked"))
        })//   复选框全选和全部取消

在这里插入图片描述