关于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 ...
随机推荐
- SSM框架整合,以CRM为例子
Mybatis.SpringMVC练习 CRM系统 回顾 Springmvc 高级参数绑定 数组 List <input type name=ids /& ...
- JAVA实用案例之验证码开发
验证码在很多地方都会遇到,实现的方法和形式也有很多,主要的目的就是为了安全,防止一些恶意的攻击等.说实话那么多年竟然没注意过这东西,原理很简单,贴出来给大家做个参考. 1.简单介绍 一般稍微有些经验的 ...
- 使用TCP/IP Monitor监视Soap协议
什么是soap? soap,简单对象访问协议,基于http传输xml数据,soap协议体是xml格式. SOAP 是一种网络通信协议 SOAP即Simple Object Access Protoco ...
- JavaScript中你所不知道的Object(一)
Object实在是JavaScript中很基础的东西了,在工作中,它只有那么贫瘠的几个用法,让人感觉不过尔尔,但是我们真的了解它吗? 1. 当我们习惯用 var a = { name: 'tarol' ...
- git和github的重要性
Git是一款免费.开源的分布式版本控制系统,github是全球最大的同性交友平台啊呸,说错了github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就 ...
- 201521123018 《Java程序设计》第3周学习总结
1. 本章学习总结 1. 学习了类的创建: 2. 学会利用快捷方式完成变量的getter和setter的设定: 3. 学会了静态变量和非静态变量的区别和定义: 4. 学习了构造函数的基本编写方法. 2 ...
- 201521123119 《Java程序设计》第13周学习总结
1. 本周学习总结 Q以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 Q1. 网络基础 Q1.1 比较ping www.baidu.com与ping cec. ...
- java课程设计 猜数游戏 个人
1.团队课程设计博客链接 /http://www.cnblogs.com/ohanna/p/7064305.html 2.个人负责模块说明 1.进入界面: 2.成功玩家信息的录入: 3.信息的读出 3 ...
- Spark Streaming socketTextStream简单demo
正文 SparkStreaming的入口是StreamingContext,通过scala实现 一个简单的实时获取数据.代码SparkStreaming官网也可以找到. object SocketDS ...
- CSS3 3D环境实现立体 魔方效果代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...