关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了。原代码大致结构关键如下:
function selectAll(obj){
$('input[name="xxx[]"]').attr("checked",obj.checked);
}
<input type="checkbox" id="mother" name="mother" onclick="selectAll(this);"/>全选
<input type="checkbox" id="son1" name="xxx[]" />子框
<input type="checkbox" id="son2" name="xxx[]" />子框
<input type="checkbox" id="son3" name="xxx[]" />子框
<input type="checkbox" id="son4" name="xxx[]" />子框
步骤一.尝试正面刚一波:
function selectAll(obj){
if(obj.checked) {
$('input[name="xxx[]"]').attr("checked", true);
} else {
$('input[name="xxx[]"]').removeAttr("checked");
}
}
卒-----完全没有效果,弃之。
步骤二.快速上网搜索一番,发现这个问题比较常见,在遇到过这个问题的人里,我应该排在千里之外了。点开几个看了,基本都是说用prop替代attr便能解决,奈何如下:

然而项目上用的版本低于1.6并被告知最好不要更改版本,同弃之。
步骤三.无可奈何,JQuery弃之...尝试改用原生js写法,代码如下:
function selectAll(obj){
var xxx = document.getElementsByName("xxx[]");
if(obj.checked) {
for(var i = 0;i < xxx.length;i++) {
xxx[i].checked = true;
}
} else {
for(var i = 0;i < xxx.length;i++) {
xxx[i].checked = false;
}
}
}
测试一下,顺利解决。其实也算是个小问题,不过给了我一些启示,不能局限在一个框里,多换个角度思考问题,往往能更好地去解决问题。
关于JQuery全选/反选第二次失效的问题的更多相关文章
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery全选反选插件
(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- 关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...
- jquery全选反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 全选 反选 单击行改变背景色
我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...
- jquery 全选反选 .prop('checked',!$(this).is(':checked'));
//废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...
随机推荐
- Web.py 框架学习笔记 - ctx
摘要: ctx用于存取web请求的环境变量,基于ThreadedDict类进行实例化.ThreadedDict类可实例化字典类型的对象,该对象某些属性可用于存取处理线程的id. 这样字典化实例的线程池 ...
- RAISERROR
RAISERROR 可以抛出一个错误,并被程序捕获,在存储过程经常使用: 是否进入Catch代码执行区域,在于错误严重等级设置 RAISERROR ('无效数据', 11 , 1) 第一个参数:自定义 ...
- MyEclipse使用(一)
一.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JRE name --- ...
- 关于SpringMVC项目报错:java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/xxxx.xml]
关于SpringMVC项目报错:java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/xxxx ...
- 团队作业4——第一次项目冲刺(Alpha版本)2017.4.23
1.当天站立式会议照片 本次会议为第一次会议 本次会议在5号公寓1楼召开,本次会议内容: ①:做第一天的简单分工 ②:讨论每个人是否对安排的任务有苦难 ③:规定完成时间是在第二天之前 ④:遇到困难,及 ...
- 201521123039 《java程序设计》第七周学习总结
1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:ArrayList的Contains的源码如上图所示,如果o为null,那么 ...
- java201521123118《java程序设计》第5周总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过 ...
- 201521044091 《Java程序设计》第2周学习总结
1本章学习总结 (1)一些java的基本语法 (2)java API文件 (3)使用码云管理自己的代码 2.Java Q&A 1)使用Eclipse关联jdk源代码(截图),并查看String ...
- 201521123033《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. answer: 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号 ...
- PHP面向对象简单总结
类和对象对象:一切东西都可以看做对象,对象是类的实例化.类:类是对象的抽象,用来描述众多对象共有的特征. 定义类 class成员变量 和 成员方法访问修饰符 public共有的 private 私有的 ...