关于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 ...
随机推荐
- chrome开发工具指南(三)
Security 面板 使用 Security Overview 可以立即查看当前页面是否安全. 检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源). Security O ...
- sqlserver自定义函数
标量函数 RETURNS 子句指定一种标量数据类型,则函数为标量值函数. 语法 Create function 函数名(参数) Returns 返回值数据类型 [with {Encryption | ...
- 第3阶段——内核启动分析之make uImage编译内核(3)
目标: 通过分析makefile,明白make uImage如何编译内核 把整个内核的makefile分成三类(makefile资料文档在linux-2.6.22.6/Documentation/bu ...
- 【2017集美大学1412软工实践_助教博客】团队作业3——需求改进&系统设计 成绩公示
第三次团队作业成绩公布 题目 团队作业3: 需求改进&系统设计 团队成绩 成绩公示如下: 缩写 TD BZ GJ CJ SI WBS GS JG DB SS SJ CS DC Total 分值 ...
- Python的变量参数
- JAVA2015086第十一周作业
本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了 ...
- linux下修改rm命令防止误删除
前言:相信很多朋友都遇到过在linux下用rm命令误删除文件的时候,此刻的心中仿佛有无数的羊驼在奔腾.那么怎么防止这种情况发生呢?当然是有方法的,我们可以写一个shell脚本,改变一下rm命令的作用. ...
- spring boot / cloud (十七) 快速搭建注册中心和配置中心
spring boot / cloud (十七) 快速搭建注册中心和配置中心 本文将使用spring cloud的eureka和config server来搭建. 然后搭建的模式,有很多种,本文主要聊 ...
- Mysql中的like模糊查询
MySql的like语句中的通配符:百分号.下划线和escape %代表任意多个字符 _代表一个字符 escape,转义字符后面的%或_,使其不作为通配符,而是普通字符匹配 数据库数据如下: 1. ...
- open和opener使用說明
父網頁:window.open("article.html")子網頁:var dialoginfo=$('#dialogdata',window.opener.document); ...