jquery、js实现复选框(全选、反选)

5星 · 超过95%的资源需积分: 50 103 浏览量 2009-06-09 12:05:31 上传评论收藏 855B TXT 举报

### 使用jQuery和JavaScript实现复选框的全选与反选功能在Web开发中，复选框（checkbox）是常用的一种交互元素，特别是在表格或列表中用于选择多个项目时非常实用。本文将详细介绍如何利用jQuery和原生JavaScript来实现复选框的全选和反选功能。 #### 一、jQuery实现复选框全选与反选 **1.1 全选功能** 首先来看全选功能的实现。全选即用户点击某个按钮后，页面上所有的复选框都将被选中。 ```javascript // 全选 function checkAll() { $(":checkbox").attr("checked", true); } ``` 上述代码通过jQuery的选择器`$(":checkbox")`选中页面上所有的复选框，并通过`attr("checked", true)`设置它们的`checked`属性为`true`，从而实现了全选的功能。 **1.2 反选功能** 接下来实现反选功能，即当用户点击反选按钮后，所有已选中的复选框将变为未选中状态，而未选中的复选框则变为选中状态。 ```javascript // 反选 function checkAllFalse() { $(":checkbox").each(function() { $(this).attr("checked", !$(this).is(":checked")); }); } ``` 这里使用了`.each()`方法遍历所有复选框，然后通过`!$(this).is(":checked")`来判断当前复选框是否被选中，如果选中则取消选中，反之亦然。 #### 二、原生JavaScript实现复选框全选与反选除了使用jQuery外，还可以使用原生JavaScript来实现相同的功能。 **2.1 全选功能** ```javascript // 全选 function chooseAll() { var selects = document.getElementsByName('checkbox'); for (var j = 0; j < selects.length; j++) { selects[j].checked = true; } } ``` 上述代码通过`document.getElementsByName('checkbox')`获取所有名为`checkbox`的复选框，然后通过循环将它们的`checked`属性设置为`true`。 **2.2 反选功能** ```javascript // 反选 function fanSelect() { var selects = document.getElementsByName('checkbox'); for (var j = 0; j < selects.length; j++) { if (selects[j].checked === true) { selects[j].checked = false; } else { selects[j].checked = true; } } } ``` 这段代码同样通过`document.getElementsByName('checkbox')`获取所有复选框，然后通过循环对每个复选框的状态进行反转。 #### 三、示例代码整合与优化为了更好地展示这些功能的实际效果，我们可以通过HTML页面来整合以上功能，并添加相应的按钮供用户操作。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Checkbox Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="checkbox" name="checkbox"> Item 1<br> <input type="checkbox" name="checkbox"> Item 2<br> <input type="checkbox" name="checkbox"> Item 3<br> <button onclick="checkAll()">全选</button> <button onclick="checkAllFalse()">反选</button> <button onclick="chooseAll()">全选(原生JS)</button> <button onclick="fanSelect()">反选(原生JS)</button> <script> function checkAll() { $(":checkbox").attr("checked", true); } function checkAllFalse() { $(":checkbox").each(function() { $(this).attr("checked", !$(this).is(":checked")); }); } function chooseAll() { var selects = document.getElementsByName('checkbox'); for (var j = 0; j < selects.length; j++) { selects[j].checked = true; } } function fanSelect() { var selects = document.getElementsByName('checkbox'); for (var j = 0; j < selects.length; j++) { if (selects[j].checked === true) { selects[j].checked = false; } else { selects[j].checked = true; } } } </script> </body> </html> ``` 在这个示例中，我们创建了一个简单的HTML页面，包含了三个复选框和四个按钮，分别对应不同的功能。通过调用相应的函数，用户可以方便地进行全选或反选操作。 #### 四、总结通过以上内容，我们可以看到使用jQuery和原生JavaScript都能轻松实现复选框的全选与反选功能。具体选择哪种方式取决于项目的实际需求和个人偏好。对于需要轻量级且不依赖额外库的应用场景，推荐使用原生JavaScript；而对于已经引入jQuery或其他大型项目来说，使用jQuery可能更为便捷。

资源推荐

资源详情

资源评论

//全选
function checkAll()
{
$(":checkbox").attr("checked", true); //打勾
}

//反选
function checkAllfalse() {
$(":checkbox").attr("checked", false); //不打勾
}

JS的全选与反选

//全选

function chooseAll() {
var selects = document.getElementsByName('checkbox');
for (var j = 0; j < selects.length; j++) {
selects[j].checked = true;
}
}

//反选
function fanselect() {
var selects = document.getElementsByName('checkbox');
for (var j = 0; j < selects.length; j++) {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论收藏

内容反馈