简明现代魔法 -> JavaScript -> DOM属性:checked介绍

DOM属性:checked介绍

2010-06-02

checked 属性设置或返回 checkbox 是否应被选中。

语法:checkboxObject.checked = true|false

该属性保存了 checkbox 的当前状态,不管何时,这个值发生变化的时候,onclick 事件句柄就会触发(也可能触发 onchange 事件句柄)。

下面的例子可设置该 checkbox 的状态:

代码如下:

<html>
<head>
<script type="text/javascript">
function check()
{
  document.getElementById("check1").checked=true
}
function uncheck()
{
  document.getElementById("check1").checked=false
}
</script>
</head>
<body>

<form>
<input type="checkbox" id="check1" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>

</body>
</html>

再一个示例:点击按钮全选 checkbox

1 2 3 4 5

JavaScript Code

function $N(name)
{ 
	return document.getElementsByName(name);
}

function $TN(name)
{
	return document.getElementsByTagName(name);
}

function checkall(v,name)
{
	//v当前要设置的值true/false;name要设置的checkbox组的name,如果省略则默认为所有的checkbox
    o=name?$N(name):$TN("input");
    for(i=0;i<o.length;i++)    if(o[i].type=="checkbox")o[i].checked=v;
}

function setstatus(o)
{
     var status = o.value=="全选"
     o.value=status?"取消":"全选"
     checkall(status,'a');
}

HTML Code

<input type="checkbox" name="a"> 1
<input type="checkbox" name="a"> 2
<input type="checkbox" name="a"> 3
<input type="checkbox" name="a"> 4
<input type="checkbox" name="a"> 5 <br />
<input type="button" onclick="setstatus(this)" value="全选">
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们