Jquery全选与反选点击执行一次的解决方案


Posted in Javascript onAugust 14, 2015

代码需求, 使用attr只能执行一次,使用prop则完美实现全选和反选,获取所有选中的项并把选中项的文本组成一个字符串。

解决方案一:

代码如下:

<html>
<head>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>

<input type="checkbox" name="chk_list[]" value="1" />1

<input type="checkbox" name="chk_list[]" value="2" />2

<input type="checkbox" name="chk_list[]" value="3" />3

<input type="checkbox" name="chk_list[]" value="4" />4

<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">

$("#chk_all").click(function(){
 
// 使用attr只能执行一次
 
$("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); 
 
// 使用prop则完美实现全选和反选
 
$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));


// 获取所有选中的项并把选中项的文本组成一个字符串
 
var str = '';
 
$($("input[name='chk_list[]']:checked")).each(function(){
 
str += $(this).next().text() + ',';
 
});
 
alert(str);

});
</script>
</body>
</html>

总结:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

参考 https://3water.com/article/62308.htm

解决方案二:

问题描述:

$(".chooseall").click(function(){
 if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
 console.log(1);
 }else{
 $("input[name='checkbox1']").attr("checked","checked");
 console.log(2);
 }
});

上面的这个代码第一次点击和第二次点击,能实现全选和反选功能,但一遍之后就不再起作用,这是什么情况啊

Jquery全选与反选点击执行一次的解决方案

除了第一个checkbox之外,其余的都是ajax动态生成的,跟这个有关系么?console.log每次点击的都能交替输出1和2,但就是中间的代码不能执行。

解决方案:

removeAttr参数只需要一个,removeAttr("checked")
不过建议替换成

$(".chooseall").click(function(){
 if($(".chooseall").prop("checked") == true){
 $("input[name='checkbox1']").prop("checked", false);
 console.log(1);
 }else{
 $("input[name='checkbox1']").prop("checked", false);
 console.log(2);
 }
});

或者更简洁的,

$(".chooseall").click(function(){
 var isChecked = $(this).prop("checked");
 $("input[name='checkbox1']").prop("checked", isChecked);
});

以上是Jquery全选与反选点击执行一次的解决方案,希望对大家有所帮助。

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 #Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 #Javascript
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 #Javascript
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
javascript的几种写法总结
2016/09/30 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
社区包粽子活动方案
2014/01/21 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
计划生育责任书
2015/05/09 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
七个非常实用的Python工具包总结
2021/06/15 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android