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 相关文章推荐
jquery 学习之二 属性相关
Nov 23 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
详解Vue项目中实现锚点定位
Apr 24 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 SFTP实现上传下载功能
2017/07/26 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
JavaScript更改class和id的方法
2008/10/10 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jQuery获取URL请求参数的方法
2015/07/18 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
浅析python协程相关概念
2018/01/20 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
意向书范本
2014/07/29 职场文书
语文复习计划
2015/01/19 职场文书
晚会开幕词
2015/01/28 职场文书
大学生求职自荐信
2015/03/24 职场文书
统招统分证明
2015/06/23 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
导游词之镇江焦山
2019/11/21 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB