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

最新推荐文章于 2025-05-20 16:08:55 发布

原创最新推荐文章于 2025-05-20 16:08:55 发布 · 138 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

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

Js/jQuery 同时被 2 个专栏收录

34 篇文章

订阅专栏

Utils

12 篇文章

订阅专栏

本文介绍如何使用纯JS及JQuery实现复选框全选、全不选及反选的功能。通过示例代码展示了两种不同方式下复选框状态的控制方法，并提供了获取已选中复选框值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>