Js/Jquery 实现checkbox全选，反选，全不选

xdwangiflytek

浏览: 675675 次
性别:
来自: 安徽

最近访客更多访客>>

fighter1945

meg_yin

xiaohei445_qq

ddxkj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Utils
Js/Jquery

Jquery js实现checkbox全选反选全不选

Use by JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js实现checkbox全选，反选，全不选</title>
    <script type="text/javascript">
        //复选框全选
        function checkAll(formvalue) {
            var roomids = document.getElementsByName(formvalue);
            for (var j = 0; j < roomids.length; j++) {
                if (roomids.item(j).checked == false) {
                    roomids.item(j).checked = true;
                }
            }
        }

        //复选框全不选
        function uncheckAll(formvalue) {
            var roomids = document.getElementsByName(formvalue);
            for (var j = 0; j < roomids.length; j++) {
                if (roomids.item(j).checked == true) {
                    roomids.item(j).checked = false;
                }
            }
        }

        //复选框选择转换
        function switchAll(formvalue) {
            var roomids = document.getElementsByName(formvalue);
            for (var j = 0; j < roomids.length; j++) {
                roomids.item(j).checked = !roomids.item(j).checked;
            }
        }

    </script>
</head>
<body>
  <input type="radio" name="all" id="all" onclick="checkAll('test')" />
    全选
    <input type="radio" name="all" id="Checkbox1" onclick="uncheckAll('test')" />
    全不选
    <input type="radio" name="all" id="Checkbox2" onclick="switchAll('test')" />
    反选<br />
    <input name="test" value="复选框1" type="checkbox" />复选框1<br />
    <input name="test" value="复选框2" type="checkbox" />复选框2<br />
    <input name="test" value="复选框3" type="checkbox" />复选框3<br />
    <input name="test" value="复选框4" type="checkbox" />复选框4<br />
    <input name="test" value="复选框5" type="checkbox" />复选框5<br />
    <input name="test" value="复选框6" type="checkbox" />复选框6<br />
</body>
</html>

update by xdwang 2012-11-30

Use by JQuery

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="./res/js/jquery-1.8.2.js">
</script>
<title>JQuery实现checkbox全选，反选，全不选</title>
<script type="text/javascript">

	
	//复选框选择
	function checkboxOnclick(){
		if($("[name='test'][checked]").length>1){
			$("input[name='test']").each(function(){
				$(this).attr("checked",false);
			});  
		}else{
			$("input[name='test']").each(function(){
				$(this).attr("checked",true);
			});  
		}
	}
	
	//获取选中复选框的值，一般在批量删除时需要使用
	function getCheckBoxValues(){
		var idsStr="";
		$("input[name='test']").each(function(){
			if($(this).attr("checked") == "checked"){
				if($(this).val()!=""){
					idsStr+=$(this).val()+",";
				}
			}
		});
		if(idsStr!=""){
			//进行删除
			alert(idsStr);
		}else{
			alert("请选择需要删除的记录!");
		}
		
	}
</script>
</head>
<body>
	
	<input name="test" value="" type="checkbox" onclick="checkboxOnclick()" /> 复选框 <br />
	<input name="test" value="1" type="checkbox" /> 1 <br />
	<input name="test" value="2" type="checkbox" /> 2 <br />
	<input name="test" value="3" type="checkbox" /> 3 <br />
	<input name="test" value="4" type="checkbox" /> 4 <br />
	<input name="test" value="5" type="checkbox" /> 5 <br />
	<input name="test" value="6" type="checkbox" /> 6 <br />
	<input type="button" value="获取选中复选框的值集合" onclick="getCheckBoxValues()">
</body>
</html>

js实现checkbox全选，反选，全不选.rar (771 Bytes)
下载次数: 64

分享到：

匿名类、内部类、匿名内部类 | Ajax入门

2012-01-12 14:04
浏览 8338
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Js/Jquery 实现checkbox全选，反选，全不选

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Js/Jquery 实现checkbox全选，反选，全不选

评论

发表评论

相关推荐

js怎么控制textarea滚动条定位在光标的位置

js 禁止鼠标滑轮滚动的事件

网页上“分享”的实现

用iframe模拟ajax上传文件

jquery.validationEngine

AjaxFrom

调用天气预报

学会读JQuery等JS插件源码

打开对话框时，设置焦点到 input 域失效

js锚点定位

JQuery获取Radio选中的值

使用jQuery清空file文件域的方法

input提示

JS(DOM)对象和JQuery对象的相互转换

判断某个元素是否在js数组中

统一中英文长度问题

SCRIPT1028: Expected identifier, string or number

JS中的replaceAll方法

IE8下的一个另类

Js/JQuery 获取下拉框值

最近访客更多访客>>