开启辅助访问 充值VIP充值豆豆
QQ登录 自动登录 注册 找回密码
查看: 7471|回复: 0

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

[复制链接]

该用户从未签到

156

主题

156

帖子

2万

豆豆

超级版主

光头春 发表于 2018-5-12 09:40:18 | 显示全部楼层 |阅读模式

代码需求, 使用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方法。

参考 http://www.jb51.net/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);
 }
});

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

除了第一个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全选与反选点击执行一次的解决方案,希望对大家有所帮助。


其它思必达学院教程推荐:
discuz2.5建站仿站视频全套教程
《完全手册:ASP.NET 2.0网络开发详解》电子教程/随书光盘[ISO]
《北风网上海讲师人力资源管理项目(HR)实战前预热模块之权限管理开发》[压缩包]
《后盾网DIVCSS原创视频教程》更新至24课[WMV]
《学习Python》资料下载
《电脑学校办公应用视频教程》(COMPUTER SCH00L)简体中文[ISO]
《新概念电脑组装与维护教程》[ISO]
《Windows Server 2003 ActiveDirectory 配置指南》[PDF]
《深入解析Windows操作系统》(Microsoft Windows Internals)((美)所罗门(Solomon,D.A.) / 美)罗斯(Russi
《CentOS5.3 5.4 配置 JSP Linux 服务器》(JSP CentOS 5.3 5.4 Linux Server)[压缩包]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

本站资源全部来自网络和网友分享,如有侵犯您的权益,请联系网站QQ,或发邮件至sibida@foxmail.com。本网站尊重知识产权,无意侵犯知识产品,如有,联系网站人员,会第一时间删除!

小白基地,是小白资源网的官方网站,思必达学院官网,提供最新的创业技术支持与创业资讯,提供最新的思必达教程。是IT小白网友学习资源分享基地,中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。

快速回复 返回顶部 返回列表
世界未解之谜大全 网上兼职招聘信息 南宁大学生兼职网