您的位置：首页 > Web前端 > JavaScript

javascript多选框

2016-07-13 21:22 309 查看

主要是使用document.getElementById（）方法、document.getElementsByTagName（）方法、onclick（）事件。

1.document.getElementById（）：它是一个document对象的方法，可以通过它来获得指定id的html元素。

例如：在页面里表单元素你可以给它设置id值，或name值来区别同种类型的不同元素，当你设置id为document.getElementById（“id”）来获取权限。才能进入下一步，document.getElementById（“id”）.value可以得到这个元素的值。还有跟这样的方法有很多document.getElementByName（“name”）通过元素名称才能获得对象，才能够让这句代码实现它最大的价值。（也是编写javascript不可缺少的一句代码）

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=[code]document.getElementById("myHeader")

alert(x.innerHTML)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>[/code]

2.document.getElementsByTagName（）：返回带有指定标签名的对象的集合

[b]提示： 参数值 "*" 返回文档的所有元素。[/b]

例子：
<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to change the text in this paragraph.</p>

<button onclick="myFunction()">Try it</button>

<script>

function myFunction()
{
document.getElementsByTagName("P")[0].innerHTML="Hello World";
};

</script>

</body>
</html>

选项卡：
在body内容区中输入不做任何操作就能显示在页面上的内容。
<body>
<div id="pc1">
<input type="checkbox"/>游泳
<input type="checkbox"/>跳水
<input type="checkbox"/>跳舞
<input type="checkbox"/>打球
</div>

//将所要进行改变的东西编写在一起，可以让我们更清晰、更方便

　　　　　　　　　
<input type="button" value="全选" onclick="a()"/>
<input type="button" value="全不选" onclick="b()"/>
<input type="button" value="反选" onclick="c()"/>
<input type="button" value="全选/全不选" onclick="d()"/>
//将要点击的东西进行控制，从而实现所要实现的效果
</body>

//进行编写javascript实现我们所要的动态效果
<script>
function a(){　　　　　　　
var qq=document.getElementById("pc1").getElementsByTagName("input");  //获取所要改变的东西的权限，然后在选择要改变的东西的所有名称名
for(var i=0;i<qq.length;i++)
{
qq[i].checked=true;　　　　　　//checked表示已经被选中之后的，让他们每一个都为true，从而实现全选
}

}
function b(){
var qq=document.getElementById("pc1").getElementsByTagName("input");//获取所要改变的东西的权限，然后在选择要改变的东西的所有名称名
for(var i=0;i<qq.length;i++)
{
qq[i].checked=false;　　　　　　//当所有都是选中的情况下，每一个input都是为true的，但是当他为false的时候，能够实现全部去掉
}

}
function c(){
var qq=document.getElementById("pc1").getElementsByTagName("input");
for(var i=0;i<qq.length;i++)
{
if(qq[i].checked==true)　　　　　　　　//当为true的时候，点击会变成false
{
qq[i].checked=false;
}else
{
qq[i].checked=true;　　　　　　　　//当为false的时候，点击会变成true
}
}
}
function d(){
var qq=document.getElementById("pc1").getElementsByTagName("input");
if(qq[0].checked==true)　　　　　　　　//首先判断一下是否为全选中状态
{
for(var i=0;i<qq.length;i++)　　　//如果是全选中，开始执行全部不选中状态
{
qq[i].checked=false;
}
}
else
{
for(var i=0;i<qq.length;i++)　　　//否则开始执行全部选中状态
{
qq[i].checked=true;
}
}

}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航