DOM全选、全不选、反选的操作
今天学习了 DOM相关的知识，完成了它实现全选、全不选以及反选和提交的操作。
但是只能在发firefox中才能显示正常的效果，在IE或其他浏览器不可以。 这个问题还需要怎样去解决呢？ 请教高手！
效果：
用了onclick触发事件来写的。
源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
</head>
<body>
<div align="center">
<b>请选择您的爱好</b>！
<br/>
<input type="checkbox" id="all" >全选/全不选
</div>
<div id="divlist" align="center">
<input type="checkbox" id="p1" value="足球">足球
<input type="checkbox" id="p2" value="篮球">篮球
<input type="checkbox" id="p3" value="游泳">游泳
<input type="checkbox" id="p4" value="唱歌">唱歌
<br/>
<input type="button" value="全选" οnclick="setAll();">
<input type="button" value="全不选" οnclick="none();">
<input type="button" value="反选" οnclick="fan();">
<input type="button" value="提交" οnclick="submit();">
</div>
</body>
<script type="text/javascript">
//全选/全不选
//根据id名称获取指定的节点对象
var alllist = document.getElementById("all");
var divlist = document.getElementById("divlist");
//通过调用getElementsByTagName("input");,来获取divlist所有的input对象节点
var inputs = divlist.getElementsByTagName("input");
//全选/全不选的操作
alllist.onclick = function(){
//判断它是否被选中
if(this.checked){
//遍历
for(var i=0;i<inputs.length;i++){
inputs[i].checked="checked";
}
}else{
for(var i=0;i<inputs.length;i++){
inputs[i].checked=null;
}
}
}
//全选
function setAll()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="checked";
}
}
}
///全不选
function none()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked=null;
}
}
}
//反选
function fan()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
if(inp.checked==true){
inp.checked=null;
}
else{
inp.checked="checked";
}
}
}
}
//提交的操作
function submit(){
//根据标签名称获取 该标签名称的所有节点对象
var inputsNodes = document.getElementsByTagName("input");
//获取指定节点 ---所有input节点对象
var divNodes = document.getElementById("divlist");
//判断是否是元素节点
if(divNodes.nodeType==1){
调用getElementsByTagName("option");获取divlist下面的所有input节点对象
var divInputsNodes = divNodes.getElementsByTagName("input");
//遍历divNodes所有的节点
var msg="您的喜好是：";
for(var i=0;i<divInputsNodes.length;i++){
//得到一个具体的divInputsNodes[i]节点
var divNode = divInputsNodes[i];
//判断是否被选中
if(divNode.checked==true){
//alert("您的喜好是："+divNode.value);
msg+=divNode.value+",";
}
}
//打印出此结果
alert(msg);
}
}
</script>
</html>
扫一扫
2812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
