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

javaScript 全选反选案例

2014-01-29 19:17 330 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>check.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>

</html>

<script language="JavaScript">
/*
* <input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
*/
var itemsElements = document.getElementsByName("items");

//<input type="button" name="checkall" id="checkall" value="全选" />
document.getElementById("checkall").onclick = checkall;

function checkall(){
for(var i=0;i<itemsElements.length;i++){
var itemsElement = itemsElements[i];

itemsElement.checked = "checked";
}

}

//<input type="button" name="checkall" id="checkallNo" value="全不选" />
document.getElementById("checkallNo").onclick = checkallNo;

function checkallNo(){
for(var i=0;i<itemsElements.length;i++){
var itemsElement = itemsElements[i];

//itemsElement.removeAttribute("checked");

//itemsElement.setAttribute("checked",null);

itemsElement.checked = null;

/*
* 编写javascript代码时：
* 	* 不仅要语法正确，而且效果也正确
* 	* 只看语法的正确性，最终要看效果对不对
*/
}
}

//<input type="button" name="checkall" id="check_revsern" value="反选" />
document.getElementById("check_revsern").onclick = function(){
for(var i=0;i<itemsElements.length;i++){
var itemsElement = itemsElements[i];

if(itemsElement.checked){
itemsElement.checked = null;
}else{
itemsElement.checked = "checked";
}
}
}

//<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
document.getElementById("checkItems").onclick = function(){
if(this.checked){
//全选
checkall();
}else{
//全不选
checkallNo();
}
}

/*
* 编写代码时，总是想一次性将代码做到最优：
* 	* 即使是三行代码，多日后，也是需要维护的
* 	* 代码实现上：
* 		* 完成功能，目标
* 		* 做优化
*/

</script>

另一个案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">

<select name="first" multiple="multiple" size="10" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</body>
</html>

<script type="text/javascript">
//<input name="add"  id="add" type="button" class="button" value="-->" />
document.getElementById("add").onclick = add;

function add(){
/*
* 将左边被选中的选项，移到右边去
* 	* 选中一个时
* 	* 选中多个时
*/
var firstElement = document.getElementById("first");
var options = firstElement.getElementsByTagName("option");

var secondElement = document.getElementById("second");

//			for(var i=0;i<options.length;i++){
//				if(options[i].selected){
//					secondElement.appendChild(options[i]);
//					i--;
//				}
//			}

var len = options.length;

for(var i=0;i<len;i++){
/*
* select标签的selectedIndex属性
* 	* 当没有选中任何一个选项时，selectedIndex属性值是"-1"
* 	* 当选中一个选项的时候，selectedIndex属性值是被选中的选项的索引值
* 	* 当选中多个选项的时候，selectedIndex属性值是第一个被选中的选项的索引值
*/
//alert(firstElement.selectedIndex);
if(firstElement.selectedIndex!=-1){
secondElement.appendChild(options[firstElement.selectedIndex]);
}
}
}

//<input name="add_all" id="add_all"  type="button" class="button" value="==>" />
document.getElementById("add_all").onclick = function(){
var firstElement = document.getElementById("first");
var options = firstElement.getElementsByTagName("option");
var len = options.length;
var secondElement = document.getElementById("second");
for(var i=0;i<len;i++){
secondElement.appendChild(options[0]);
}

}

//<input name="remove"  id="remove" type="button" class="button" value="<--" />
document.getElementById("remove").onclick = remove;

function remove(){
var secondElement = document.getElementById("second");
var options = secondElement.getElementsByTagName("option");
var len = options.length;
var firstElement = document.getElementById("first");
for(var i=0;i<len;i++){
if(secondElement.selectedIndex!=-1){
firstElement.appendChild(options[secondElement.selectedIndex]);
}
}
}

//<input name="remove_all"  id="remove_all" type="button" class="button" value="<==" />
document.getElementById("remove_all").onclick = function(){
var secondElement = document.getElementById("second");
var options = secondElement.getElementsByTagName("option");
var len = options.length;
var firstElement = document.getElementById("first");
for(var i=0;i<len;i++){
firstElement.appendChild(options[0]);
}
}

//双击事件
document.getElementById("first").ondblclick = add;

document.getElementById("second").ondblclick = remove;

</script>

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

标签：

相关文章推荐

新的分享

章节导航

javaScript 全选 反选案例

javaScript 全选反选案例