一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Javascript checkbox 勾选与反勾选详解

时间:2011-12-08 编辑:简简单单 来源:一聚教程网

 代码如下 复制代码

checkbox" name="checkbox" value="" id="checkbox" />

Javascript处理checkbox总结如下

1,javascript勾选checkbox表单
(1)获取表单对象
(2)设置表单对象的checked值,true表示勾选否则反勾选

 代码如下 复制代码

document.getElementById("checkbox").checked = true

2,javascript获取页面所有checkbox表单对象
(1)根椐标签TagName获取所有input对象
(2)如果对象type为checkbox则为checkbox表单

 代码如下 复制代码

var checkbox = document.getElementsByTagName("input");
for(var i=0,length=checkbox .length;i     if(checkbox.type == 'checkbox'){
        //checkbox表单
    }
}

3,实现checkbox表单临近元素点击勾选,如下点击“选中”勾选checkbox表单

 代码如下 复制代码

选中
 
var checkbox = document.getElementById("checkbox");
var nextObj = checkbox.nextSibling;
nextObj.onclick = function(){
    this.previousSibling.click();
}

注意获取两个临近元素nextSibling和previousSibling的应用。

参考资料
XML DOM nextSibling 属性
nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。
如果无此节点,则属性返回 null。
语法:nodeObject.nextSibling

XML DOM previousSibling 属性
previousSibling 属性可返回某节点之前紧跟的节点(处于同一树层级)
如果没有此节点,那么该属性返回 null。
语法:nodeObject.previousSibling

 

热门栏目