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中创建对象的几种方式示例介绍
Jan 26 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
js中日期的加减法
May 06 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
Node.js笔记之process模块解读
May 31 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 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 $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python unittest单元测试框架总结
2018/09/08 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
导致python中import错误的原因是什么
2020/07/01 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
教学个人的自我评价分享
2014/02/16 职场文书
七匹狼男装广告词
2014/03/21 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
运动会入场词
2015/07/18 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
初三数学教学反思
2016/02/17 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python