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插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
js中的面向对象入门
Mar 06 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
AJAX学习笔记
May 18 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
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Flask之flask-session的具体使用
2018/07/26 Python
python把1变成01的步骤总结
2019/02/27 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Python文件操作方法详解
2020/02/09 Python
Python chardet库识别编码原理解析
2020/02/18 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
JAVA程序员自荐书
2014/01/30 职场文书
上课看小说检讨书
2014/02/22 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
成事在人观后感
2015/06/16 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL