关于input全选反选恶心的异常情况


Posted in Javascript onJuly 24, 2016

上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性。

但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$("input[type='checkbox'][name='che']").attr("checked") 获取结果为undefined),这样就无法通过if语句判断是否选中,从而实现反选功能。

我们先来理一下思路:既然“反选”功能的实现是通过判断是否有checked属性,所以当每次执行“全选”“反选”功能时,把checked属性都清除掉,这样之前重复添加的checked属性每次都会进行清除。示例代码如下:

 //全选
$("#quanxuan").click(function(){
$("#tb").find("input[type='checkbox'][name='che']").removeAttr("checked");
$("#tb").find("input[type='checkbox'][name='che']").prop("checked", true);
});
//反选
$("#fanxuan").click(function(){
$("#tb").find("input[type='checkbox'][name='che']").each(function(){
if($(this).is(":checked")){
$(this).removeAttr("checked");
$(this).prop("checked",false);
}else{
$(this).removeAttr("checked");
$(this).prop("checked","checked");
}
});
});

目前只能想到这种冗余的办法了,日后遇到新的解决方法再补充。

以上所述是小编给大家介绍的关于input全选反选恶心的异常情况,非常不错,具有参考借鉴价值,希望对大家有所帮助!

Javascript 相关文章推荐
javascript之bind使用介绍
Oct 09 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
JS中的==运算: [''] == false —>true
Jul 24 #Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 #Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 #Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 #Javascript
省市二级联动小案例讲解
Jul 24 #Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 #Javascript
js简单实现调整网页字体大小的方法
Jul 23 #Javascript
You might like
同时提取多条新闻中的文本一例
2006/10/09 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php微信支付接口开发程序
2016/08/02 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
HTML的form表单和django的form表单
2019/07/25 Python
python实现大学人员管理系统
2019/10/25 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
创业计划书六个要素
2013/12/26 职场文书
三字经教学反思
2014/04/26 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
母亲节主题班会
2015/08/14 职场文书
初中美术教学反思
2016/02/17 职场文书
Python Parser的用法
2021/05/12 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL