JS全选全不选

最新推荐文章于 2023-05-15 18:21:17 发布
最新推荐文章于 2023-05-15 18:21:17 发布
阅读量508 收藏 1
点赞数
分类专栏： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leedaning/article/details/41908739
版权
js 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
html
15 篇文章 0 订阅
订阅专栏
 

jquery判断checked的三种方法:

.attr('checked'):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:

所有的jquery版本都可以这样赋值:

// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:

// $("#cb1").prop("checked",true);//很简单就不说了哦
// $("#cb1").prop({checked:true}); //map键值对
// $("#cb1").prop("checked",function(){
return true;//函数返回true或false
});

还有这种:$("#cb1").prop("checked","checked");


第一种案例（页面上的所有复选框都会包含）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Index</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script> 
<script type="text/javascript">
$(function() { 
$("#CheckAll").click(function() { 
if($("#CheckAll").attr("checked")){
//var flag = $(this).attr("checked"); 
// $("[name=subBox]:checkbox").each(function() { //根据名字进行选中 
// $(this).attr("checked", flag); 
//}) 
$(':checkbox').attr('checked','checked'); 
}else{
$(':checkbox').attr('checked',''); 
}
}) 
}) 
</script> 
</head> 
<body> 
<div> 
<input id="CheckAll" type="checkbox" />全选
<input name="subBox" type="checkbox" />周一
<input name="subBox" type="checkbox" />周二
<input name="subBox" type="checkbox" />周三
<input name="subBox" type="checkbox" />周四 
</div> 
</body> 

</html> 

第二种案例（只包含部分复选框的全选/全不选）：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Index</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery14.js"></script> 
<script type="text/javascript">


$(function () {
    $("#CheckAll").change(function () {
        var ischecked = $(this).attr("checked");
        
        $("input[name='subBox']").each(function () {
            $("input[name='subBox']").attr("checked", ischecked)
            $("#CheckAll").attr("checked", ischecked);
        });
    });
});//美术按地区查询高校库反选
</script> 
</head> 
<body> 


<div> 
<input id="CheckAll" type="checkbox" />全选
<input name="subBox" type="checkbox" />周一
<input name="subBox" type="checkbox" />周二
<input name="subBox" type="checkbox" />周三
<input name="subBox" type="checkbox" />周四 
</div> 
</body> 
</html> 

这种是根据名称name属性来判断的，同样的可以使用id、class选择器来进行操作。

leedaning
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现全选和全不选功能
10-15
在JavaScript中，实现全选和全不选的功能是常见的需求，尤其在处理表格或列表时。这个功能允许用户一键选择所有选项或者一键清除所有选择。本篇将详细讲解如何使用JavaScript来实现这一功能。 首先，我们需要一个...
JS实现全选全不选功能
qq_64037242的博客
04-15 609
1.首先明确选中有哪几种方式：（1）用户点击、（2）标签定义属性 checkd 、(3) js中checkd = true 为选中。
js一键全选/全不选
m0_74913905的博客
04-03 715
如何用js实现全选全不选
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
热门推荐
qq_40261601的博客
02-21 1万+
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面； 2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示； 3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。 再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。 捕获选框的点击事件，当用户点击时，执行。 2、更新全选框状态及文字显示 定义一个判断是否全选的函数，遍历选框数组
JS如何实现勾选全部复选框和不全选复选框
itclanCoder
02-01 4533
前言在一些后台管理系统里面,针对全选,复选框是一个很常见的操作,复选框可以执行多项选择的一种控件,有时，为了方便用户选中所有的复选框,网页界面会提供一个选中所有复选框的功能,怎么实现一个复选框全部被选中的效果呢示例效果allcheckbox原生Js实现全选的效果,复选框是否被勾选,是由它的checked属性决定的,因此,实现本例效果的关键就是找到所有对应的复选框,然后将其它的checked属性设置...
JS实现复选框的全选/全不选
m0_60485096的博客
05-15 1137
定义函数myAll()，获取参数（全选的id，每一个分支的name），利用input的checked属性实现。checked属性借鉴链接（可以自行搜索了解）
复选框全选与全不选操作实现思路
09-05
本文将详细解析如何使用JavaScript实现复选框的全选与全不选操作。 首先，我们需要创建HTML结构，包含一个用于全选/全不选的主复选框（checkItem）和多个可选的复选框（item）。以下是一个简单的HTML示例： ```...
JS实现的全选、全不选及反选功能【案例】
10-17
总结来说，实现JS的全选、全不选和反选功能的关键在于理解DOM操作、事件监听以及属性的动态修改。通过这些基础概念，我们可以轻松地处理用户交互，提高网站或应用程序的用户体验。在实际开发中，这种功能广泛应用于...
JavaScript 全选全不选
09-01
JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选
js实现全选和全不选
10-15
在JavaScript编程中，全选和全不选的功能是常见的需求，尤其在处理表格或列表时。这个功能允许用户一键选择所有选项或者取消所有选择。在本文中，我们将深入探讨如何使用JavaScript实现全选和全不选的效果。 首先，...
JS实现全选反选全不选
06-18
JS实现全选反选全不选
js控制复选框全选、全不选
03-24
NULL 博文链接：https://dalongxn.iteye.com/blog/1074437
javascript实现全选全不选
04-20
NULL 博文链接：https://sylqy.iteye.com/blog/1894273
JavaScript 实现全选、全不选和反选功能
梁辰兴的博客
12-13 3032
网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选、全不选和反选功能。
前端js原生实现全选全不选
weixin_45096939的博客
11-21 719
现在很多的组件库已经有属性可以直接实现全选全不选的效果，比js原生的写法简单许多；原生的写法是基础，多了解点总没坏处。
【案例】JS实现 全选/全不选 功能
qq_57215961的博客
05-23 691
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全.
使用JavaScript实现全选（全不选）按钮
qq_41586079的博客
10-18 7238
有如下案例，使用JavaScript实现全选（全不选）按钮。 这个按钮在实际开发中也是很常用的，我就把我的源码附上 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多选框练习&lt;/title&gt;
JS实现全选、全不选、反选
csdnid_0001的博客
10-31 207
JS实现全选、全不选、反选、CheckBox复选框、按钮
原生JS项目练习——全选与全不选和反选
周百万的博客
10-14 1393
一、主要功能介绍：1、用原生JS实现全选：用for循环遍历每一个input，让他全部选中2、用原生JS实现全不选：用for循环遍历每一个input，让他全部选中3、用原生JS实现反选：用for循环遍历每一个input，让他现在的选中状态的相反值，赋值给他的选中状态（重点）二、JS代码详细步骤解析：这不是重点，重点是学习原生JS。
js复选框全选全不选
最新发布
04-17
在JavaScript中，可以通过以下方式实现复选框的全选和全不选功能： 1. HTML结构： ```html <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" class="checkbox"> 选项1 <input type="checkbox" class="checkbox"> 选项2 <input type="checkbox" class="checkbox"> 选项3 ``` 2. JavaScript代码： ```javascript // 获取全选复选框和其他复选框的元素 var selectAllCheckbox = document.getElementById("selectAll"); var checkboxes = document.getElementsByClassName("checkbox"); // 全选复选框的点击事件处理函数 selectAllCheckbox.addEventListener("click", function() { // 遍历其他复选框，根据全选复选框的状态设置它们的状态 for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = selectAllCheckbox.checked; } }); ``` 以上代码中，首先通过`getElementById`和`getElementsByClassName`方法获取到全选复选框和其他复选框的元素。然后，给全选复选框添加了一个点击事件处理函数，当全选复选框被点击时，遍历其他复选框，并根据全选复选框的状态设置它们的状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值