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

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. 学习笔记GAN003:GAN、DCGAN、CGAN、InfoGAN

    ​GAN应用集中在图像生成,NLP.Robt Learning也有拓展.类似于NLP中的Actor-Critic. https://arxiv.org/pdf/1610.01945.pdf . Gen ...

  2. zookeeper简单介绍

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt193 ZooKeeper是Hadoop的正式子项目,它是一个针对大型分布式系 ...

  3. Zookeeper的安装的配置

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt192 安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个 ...

  4. linux 增量备份命令Rsync 使用详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt320 Rsync的命令格式可以为以下六种: rsync [OPTION].. ...

  5. 【★】深入BGP原理和思想【第一部】

    前言:学思科技术我想说,浅尝辄止,不是天才千万别深钻.和我研究高等数学一样,越深入就会发现越多的问题与不合理之处.尤其对于IT界,算法的最终解释权还是掌握在老外手中,所以对于有些细节,我们" ...

  6. 【★】SPF(Dijkstra)算法完美教程

  7. bootstrap 表单+按钮+对话框

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 团队作业4----第一次项目冲刺(Alpha版本)4.28

    a.提供当天站立式会议照片 会议内容 今天我们主要针对统计结果的表现形式进行了一些讨论,我们考虑是直接显示统计数据或者是用一些直观的图形来体现,最后经过讨论我们大部分人认为选择数据与图形更加形象直观. ...

  9. 姑娘你大胆地往前走——答大二学生XCL之八问

    姑娘你大胆地往前走--答大二学生XCL之八问 以下问题的答案写给我家正在读大二的XCL. 写于 2017-9-13 晚 请问您是为什么选择了IT行业的? 与其说是我选择了行业,不如说是行业选择了我. ...

  10. 201521123118《java程序与设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...