领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

实现复选框的全选、反选和不选

nixiaole 2024-11-19 08:24:30 知识剖析 25 ℃

1．技术分析

复选框的全选、反选和不选其主要应用JavaScript脚本，通过自定义函数完成。

（1）在通过JavaScript脚本中的自定义函数完成复选框的全选、反选和不选功能中，应用的第一个方法是：

getElementsByTagName，获取指定标签的名称，返回值为一个包含标签信息的object。

（2）根据getElementsByTagName标签返回的对象，判断标签类型（type）的值是否是checkbox。

（3）当标签类型type的值为checkbox时，为标签中的checked赋值。当checked的值为true时，为它赋值为false；当checked的值为false时，为它赋值为true。

（4）在页面中通过script标签调用js文件夹下的文件，应用onClick事件调用自定义函数，完成全选、反选和不选功能的实现。

应用实例

在本示例中实现复选框的全选、反选和不选功能。其具体步骤如下：

（1）创建js文件夹，编写reg.js脚本文件。在reg.js中，编写自定义函数，实现全选、反选和不选功能。reg.js文件的关键代码如下：

function uncheckAll(form1,status) { //不选
    var elements = form1.getElementsByTagName('input'); //获取input标签
    for(var i=0; i<elements.length; i++){ //根据标签的长度执行循环
        if(elements[i].type == 'checkbox') { //判断对象中元素的类型
            if(elements[i].checked==true){ //判断当checked的值为true时
                elements[i].checked=false; //为checked赋值为false
            }
        }
    }
}
function checkAll(form1,status){ //全选
    var elements = form1.getElementsByTagName('input');
    for(var i=0; i<elements.length; i++){
        if(elements[i].type == 'checkbox') {
            if(elements[i].checked==false){
                elements[i].checked=true;
            }
        }
    }
}
function switchAll(form1,status) { //反选
    var elements = form1.getElementsByTagName('input');
    for(var i=0; i<elements.length; i++){
        if(elements[i].type == 'checkbox'){
            if(elements[i].checked==true){
                elements[i].checked=false;
            }else if(elements[i].checked==false){
                elements[i].checked=true;
            }
        }
    }
}

（2）创建index.php页面，输出会员信息，并添加图像按钮，通过onClick事件调用JavaScript自定义函数实现全选、反选、不选和删除的功能。其关键代码如下：

<script language="javascript" src="js/reg.js"></script>
<form method="post" name="form1" id="form1" action="index_ok.php">
<tr>
<td width="62" align="center"><input name="conn_id[]" type="checkbox" id="conn_id[]" value="1" /></td>
<td width="242"><?php echo $myrow[id];?></td>
<td width="243"><?php echo $myrow[user];?></td>
<td width="485"><?php echo $myrow[pass];?></td>
<td width="485"><?php echo $myrow[dates];?></td>
</tr>
<tr>
<td colspan="5" align="center"><!--通过onClick事件调用自定义函数，执行相应的操作-->
<img src="images/bg_19-20.jpg" onclick="checkAll(form1,status)" width="62" height="25" />
<img src="images/bg_14-14.jpg" onclick="switchAll(form1,status)" width="62" height="25" />
<img src="images/bg_07-08.jpg" width="62" height="25" onclick="uncheckAll(form1,status)" />
<input type="image" name="imageField" src="images/bg_14.jpg" />
</td>
</tr>
</form>

第二种方法：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementsByName("hobby");
var oBtn1 = document.getElementById("select_all");
oBtn1.onclick = function(){
for(var i=0;i<oInput.length;i++){
oInput[i].checked = true;
}
}
var oBtn2 = document.getElementById("no_all");
oBtn2.onclick = function(){
for(var i=0;i<oInput.length;i++){
oInput[i].checked = false;
}
}
var oBtn3 = document.getElementById("fanxuan");
oBtn3.onclick = function(){
for(var i=0;i<oInput.length;i++){
oInput[i].checked = !oInput[i].checked;
}
}

}
</script>
</head>
<body>
游泳：<input type="checkbox" name="hobby" checked="checked" /><br/>
打球：<input type="checkbox" name="hobby" /><br/>
下棋：<input type="checkbox" name="hobby" /><br/>
打魔兽：<input type="checkbox" name="hobby" /><br/>
打麻将：<input type="checkbox" name="hobby" /><br/>
打豆豆：<input type="checkbox" name="hobby" /><br/>
<input type="button" value="全选" id="select_all" />
<input type="button" value="全不选" id="no_all"/>
<input type="button" value="反选" id="fanxuan"/>
</body>
</html>

第三种方法：

<html>
<head>
<title>多选项</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
padding:2px; margin:0px;
}
-->
</style>
<script language="javascript">
function changeBoxes(action){
    var oForm = document.forms["myForm1"];
    var oCheckBox = oForm.hobby;
    for(var i=0;i<oCheckBox.length;i++) //遍历每一个选项
        if(action<0) //反选
        		oCheckBox[i].checked = !oCheckBox[i].checked;
        else //action为1是则全选，为0时则全不选
       		 oCheckBox[i].checked = action;
   }
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
您喜欢做的事情：
<p>
<input type="checkbox" name="hobby" id="ball" value="ball">
<label for="ball">打球</label>
</p>
<p>
<input type="checkbox" name="hobby" id="TV" value="TV">
<label for="TV">看电视</label>
</p>
<p>
<input type="checkbox" name="hobby" id="net" value="net">
<label for="net">上网</label>
</p>
<p>
<input type="checkbox" name="hobby" id="book" value="book">
<label for="book">看书</label>
</p>
<p>
<input type="checkbox" name="hobby" id="trip" value="trip">
<label for="trip">旅游</label>
</p>
<p>
<input type="checkbox" name="hobby" id="music" value="music">
<label for="music">听音乐</label>
</p>
<p>
<input type="checkbox" name="hobby" id="others" value="其它">
<label for="others">其它</label>
</p>
<p>
<input type="button" value="全选" onclick="changeBoxes(1);" />
<input type="button" value="全不选" onclick="changeBoxes(0);" />
<input type="button" value="反选" onclick="changeBoxes(-1);" />
</p>
</form>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表