checkbox 多选框 联动实现代码_表单特效

父类

复制代码 代码如下:

<input type="checkbox" name="father" forcheckboxgroup="groupname1"/>

子类

复制代码 代码如下:

<input type="checkbox" name="son" group="groupname1"/>

实现代码

复制代码 代码如下:

<script type="text/javascript">
function CheckboxGroup(){
var arrelement = document.all;
var i=0;
while(i<arrelement.length){
var forgroupattrib = arrelement[i].getAttribute('forcheckboxgroup');
if(forgroupattrib != null && forgroupattrib != ''){
arrelement[i].setAttribute('groupmember',_getGroupMember(arrelement[i]));
if(arrelement[i].tagName.toLowerCase() == 'input' && arrelement[i].type == 'checkbox'){
arrelement[i].onclick=function(){
//----------------------Checked All------------------
var groupmember = this.getAttribute('groupmember');
var i = 0;
while(i<groupmember.length){
groupmember[i].checked = this.checked;
i++;
}
//---------------------------------------------------
}
}
_setState(arrelement[i]);
}
i++;
}
}

function _getGroupMember(o){
var groupname = o.getAttribute('forcheckboxgroup');
var items = new Array;
var inputs = document.getElementsByTagName('input');
var i=0;
while(i<inputs.length){
if(inputs[i].type == 'checkbox'){
var groupattrib = inputs[i].getAttribute('group');
if(groupattrib == groupname){
items[items.length] = inputs[i];
var master = inputs[i].getAttribute('groupmaster');
if (master == null) {
master = new Array;
master[0] = o.uniqueID;
inputs[i].setAttribute('groupmaster', master);
}
else{
master[master.length] = o.uniqueID;
}
inputs[i].onpropertychange = function(){
if (event.propertyName == 'checked') {
var arro = this.getAttribute('groupmaster');
var i = 0;
while (i < arro.length) {
_setState(document.getElementById(arro[i]));
i++;
}
}
}
}
}
i++;
}
return items;
}

function _setState(o){
var master = o;
if(master!=null){
var chkselall = true;
var chknosel = true;
var groupmember = master.getAttribute('groupmember');
var i = 0;
while(i<groupmember.length){
if(chkselall)chkselall = groupmember[i].checked;
if(chknosel)chknosel = !groupmember[i].checked;
i++;
}
if(master.tagName.toLowerCase() == 'input'&&master.type=='checkbox'){
if (chkselall) {
master.indeterminate = false;
master.checked = true;
}
if (chknosel) {
master.indeterminate = false;
master.checked = false;
}
if(!chkselall&&!chknosel)master.indeterminate = true;
}
else{
master.disabled = chknosel;
}
}
}

window.attachEvent('onload',CheckboxGroup);
</script>

时间: 2024-10-16 05:59:05

checkbox 多选框 联动实现代码_表单特效的相关文章

checkbox 复选框不能为空_表单特效

复制代码 代码如下: <script type="text/javascript"> function check_check(checkname){ var flag; var checks = document.getElementsByName(checkname); for(var i=0;i<checks.length;i++){ if(checks[i].checked==true){ flag = true; return true; break; }

javaScript checkbox 全选/反选及批量删除_表单特效

前台代码 复制代码 代码如下: <script type="text/javascript"> var a; function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.docum

JS 动态添加列表框项效果代码_表单特效

*请选择1-3个知识点. 121312312321231231233213123213412321321352131232136213123213 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

select组合框option的捕捉实例代码_表单特效

这是一份报名表单,要求用户在选中"专业人士访问员"和"定性访问员"后,分别显示"可提供被访者类型"和"容易接触到的行业"的对应表单.当呈未选中状态时,这2个框也对应的隐藏起来. html部分 复制代码 代码如下: <p> <label class="title">报名参加的兼职职位(必填项)<br/>按住Ctrl键可多选</label> <select

文本框获得焦点和失去焦点的判断代码_表单特效

文本框失去焦点事件.获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id

刷新时清空文本框内容的js代码_表单特效

在做注册页面(.htm静态格式)时, 我想在刷新时(如F5,而不是提交表单后的返回)把开始输入文本框的内容清空 要怎么做呢? 只有密码框可以,其它的框默认保留了开始输入的信息 复制代码 代码如下: <body onload="document.forms[0].reset()">

js限制文本框为整数和货币的函数代码_表单特效

限制为整数 <html> <head> <script language="javascript" type="text/javascript"> var G=document.getElementById; function checkNumber(){ var reg = /^(?:0|[1-9][0-9]?|100)$/; var strNumber = G("txtNumber").value; ale

Javascript 表单之间的数据传递代码_表单特效

一,最简单的就是同一个网页里的表单的数据传递. 举个实例,一个网页上有两个表单,每个表单里一个文本框,一个按钮.点按钮互相对操作对方的文本框的值.我们举的例子是把一个文本框付给另一个文本框.具体的HTML代码如下:  复制代码 代码如下: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/

JavaScript聚焦于第一个字段的代码_表单特效

这个主要会用在表单字段中,所以我这里做的实验只针对表单字段.在form的子元素中循环查找第一个不是隐藏字段的字段,然后使用focus方法获得焦点.(呵呵^_^,很简单!) 复制代码 代码如下: FormUtil.focusOnFirst = function() { if (document.forms.length > 0) { for (var i = 0; i < document.forms[0].elements.length; i++) { var oField = documen