Java孩子父母类_父母和子女复选框
Parent element
Child element
Child element
Parent element2
Child element2
Child element2
Parent element3
Parent element4
页面上有一些复选框。我需要: 如果选中父母,则检查所有孩子。 如果未选中所有子项,则取消选中父项。 检查父母是否至少检查了一个孩子。
这是一些代码,但是不起作用
$('input[type=checkbox]').change(function() {
var id = $(this).attr('id');
var children = $('.parent-' + id);
//Is this a child
if (children.length)
{
//Is it checked
if ($(this).is(':checked'))
{
//Find the parent
var className = $(this).attr('class');
var pId = className.replace("parent-","");
//If the parent is not checked, then check this parent
if (!$(pId).is(':checked'))
$(pId).attr('checked','checked');
}
//Is it NOT checked
else{
//Do other childs are not checked too?
//var className2 = $(this).attr('class');
//$(className2)
}
}
//If this is a parent, then check all childs
esle{
children.attr('checked', $(this).attr('checked'));
}
});
5
投票
我在这里为您编写代码:
var checkboxHandlerObj = {
init: function() {
$('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
$('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked);
},
parentClicked: function() {
if ($(this).attr('checked')) {
$('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').attr('checked', 'checked');
} else {
$('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').removeAttr('checked');
}
},
childClicked: function() {
var temp = $(this).attr('class').split('-');
var parentId = temp[1];
if ($(this).attr('checked')) {
$('#' + parentId).attr('checked', 'checked');
} else {
var atLeastOneEnabled = false;
$('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]').each(function() {
if ($(this).attr('checked')) {
atLeastOneEnabled = true;
}
});
if (!atLeastOneEnabled) {
$('#' + parentId).removeAttr('checked');
}
}
}
};
checkboxHandlerObj.init();
Parent element
Child element
Child element
Parent element2
Child element2
Child element2
Parent element3
Parent element4
从-http://jsfiddle.net/PUWZX/4/
0
投票
我还没有检查所有脚本,但是请先告诉我是否将此代码放入
$(document).ready(function() {
....
});
并且jquery是否可以在您的页面上使用?
0
投票
尝试一下,http://jsfiddle.net/erick/dd6Qr/
// 1. Check all childs if parent is checked
$("#s9").change(function(){
if($(this).is(':checked')) {
var cls = '.parent-' + $(this).attr('id');
$(cls).attr('checked', true);
}
});
$('input[class*="parent"]').change(function(){
var cls = '.' + $(this).attr('class') + ':checked';
var len = $(cls).length;
var parent_id = '#' + $(this).attr('class').split('-')[1];
// 3. Check parent if at least one child is checked
if(len) {
$(parent_id).attr('checked', true);
} else {
// 2. Uncheck parent if all childs are unchecked.
$(parent_id).attr('checked', false);
}
});
Java孩子父母类_父母和子女复选框相关推荐
- excel导出时 如何根据java后台返回的结果 动态实现excel复选框的勾选
现在有一个excel的模板,供导出的时候使用(如下图),我们要根据java后台出从数据库取出的数据动态实现P单元格中复选框的勾选, 如果返回的结果是在职,那么在职复选框就被勾选,以此类推. 问题是我们 ...
- thymeleaf 判断checkbox是否选中_一日看尽长安花——复选框(CheckBox)数据清洗和统计的SAS实现...
CheckBox(复选框)数据通常来自于问卷调查中的多项选择题.一般在数据录入的时候为了方便录入会用","作为分隔符,同时记录多种选择,以下形式出现(变量PastTreatment ...
- 单选按钮必填会有红色选中提示吗_为什么单选按钮和复选框不能共存?
以下内容由摹客团队翻译整理,仅供学习交流,摹客设计+协作一站式云平台,从产品.设计到开发,摹客来解决. 单选按钮和复选框长期以来一直都是容易导致用户困惑的组件.这两个组件通常用于相同的情景下,但看起来 ...
- css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
- easyui tree复选框是否打钩状态_实战PyQt5: 010-复选框控件QCheckBox
复选框QCheckBox简介 QCheckBox 复选框,通常用于表示可以启用或禁用应用中的功能. QCheckBox中的常用方法: setText(): 设置复选框的显示文本: setEnabled ...
- java多选代码_[一天一点java web]复选框全选代码
My JSP 'checkbox.jsp' starting page //通过java script来实现 checkbox 全选复选框 function selectAll(){ //定义个变量 ...
- java中判断复选框是否被选中_[Java教程]jquery如何判断checkbox(复选框)是否被选中...
[Java教程]jquery如何判断checkbox(复选框)是否被选中 0 2013-08-15 18:00:14 谁都知道 在html 如果一个复选框被选中 是 checked="che ...
- 8、Java Swing JCheckBox:复选框组件
一个复选框有选中和未选中两种状态,并且可以同时选定多个复选框.Swing 中使用 JCheckBox 类实现复选框, JCheckBox类的常用构造方法如下. JCheckBox():创建一个默认的复 ...
- 请使用复选框选择_使用可选是可选的
请使用复选框选择 在上周"收藏中的可选内容"的文章发表之后,我不禁要多讲一些关于同一只野兽的事情. 更多细节. 最初由Google Guava引入并后来包含在Java 8软件包中的 ...
最新文章
- Go 学习笔记(33)— Go 自定义类型 type(自定义结构体、结构体初始化、结构体内嵌、自定义接口)
- java url 解码 编码 奇怪的解码两次
- QT的QGLWidget类的使用
- 注册Tomcat服务为系统服务
- XUL Tutorial(一)
- 偏微分方程数值解程序设计与实现——数学基础
- 计算机网络-网络边缘
- TDB Can't open database at location /path/to/db as it is already locked by the process with PID
- Android仿微信朋友圈查看全文/收起功能(雷惊风)
- 【图文】如何在学信网申请在线验证报告?包括-教育部学籍在线验证报告-教育部学历证书电子注册备案表 in 中国高等教育学生信息网
- 程序员生涯困惑时的自我解脱
- 硬盘坏了可以修复吗?如何恢复里面的数据?
- 华为设备如何查看风扇的序列号?
- MIC29302WU-TR高电流、高精度、低压差的稳压器
- 用c语言复制程序,怎么用C程序写出一个能复制自己的程序?
- 企业信息安全注意事项
- Mac 电脑安装putty
- 万亿规模的二手交易市场,真的是门好生意吗?
- S905电视盒数码视讯Q5/Q7刷Armbian并部署Klipper甜糖(一初识S905)
- matlab数学实验报告syms,MATLAB验练习题(计算机) 南邮 MATLAB 数学实验大作业答案