最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了。原代码大致结构关键如下:

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全选/反选第二次失效的问题的更多相关文章

  1. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery全选反选插件

    (function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

  3. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  4. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  5. jquery全选 反选

    //全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...

  6. 关于jquery全选反选 批量删除的一点心得

    废话不多说直接上代码: 下面是jsp页面的html代码: <table id="contentTable" class=""> <thead& ...

  7. jquery全选反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery 全选 反选 单击行改变背景色

    我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...

  9. jquery 全选反选 .prop('checked',!$(this).is(':checked'));

    //废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...

随机推荐

  1. jdbc hibernate myBatis比较

    jdbc hibernate myBatis比较 jdbc 优点:性能高,易掌握 缺点:代码繁琐 hibernate 优点:不用写sql,代码简洁 缺点:性能不好 自动生成的sql效率低下(复杂业务) ...

  2. github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...

  3. vs 2015 rdlc报表绑定datagridview中的数据

    这几天一直想要实现rdlc报表绑定datagridview中的数据,始终在虚拟表向rdlc报表绑定这一步上出错.今天从下午4点到七点四十一直在尝试.最终还是实现了,最然并不知所以然,这个问题还是以后在 ...

  4. 集美大学网络1413第十四次作业成绩(团队九) -- 测试与发布&博客展示(Beta版本)

    题目 团队作业9--测试与发布(Beta版本) 团队作业9成绩  团队/分值 Beta版本测试报告 Beta版本发布说明       总分  Bug类别. 数量 场景测试 测试结果 测试矩阵 出口条件 ...

  5. 团队作业8——第二次项目冲刺(Beta阶段)Day4--5.21

    展开圆桌式会议: 会议内容:1.团队成员对昨天任务完成情况做一个简单交流,并对昨天工作中存在的问题提出集中讨论解决:2.按照昨天的昨天工作分配表做具体的任务分配:3.简单讨论明天的任务分配每个人的工作 ...

  6. 【Alpha】——First scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 · 李永豪 编写测试计划 学习JAVA编程及UI设计 · 郑靖涛 Alpha任务分配计划 学习JAVA编程及UI设 ...

  7. 201521123051《Java程序设计》第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 使用工具:百度脑图 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 ...

  8. 201521123070 《JAVA程序设计》第1周学习总结

    本周学习总结 1.认识了三大平台Java SE.Java EE.Java ME. 2.认识了解了JDK,JVM与JRE,且熟悉JDK的操作并下载安装. 3.学会用博客写作业了. 书面作业 Q1.为什么 ...

  9. 201521123019《Java程序设计》第1周学习总结

    一.本周章学习总结 1.了解了JDK和JRE的区别 2.学会用ALT+/快速写代码 3.成功安装JDK和Eclipse 4.初步了解JAVA的发展史 二.书面作业 1.为什么java程序可以跨平台运行 ...

  10. 201521123001《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...