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 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
使用angular写一个hello world
Jan 23 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
浅谈React碰到v-if
Nov 04 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 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
织梦模板标记简介
2007/03/11 PHP
php实现encode64编码类实例
2015/03/24 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python实现百度关键词排名查询
2014/03/30 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
个人股份合作协议书
2014/10/24 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android