jquery checkBox全选及取消全选

最新推荐文章于 2024-05-08 17:11:32 发布

原创最新推荐文章于 2024-05-08 17:11:32 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #checkBox

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用jQuery简化HTML页面中复选框操作的方法。通过一个全选按钮统一控制多个复选框的状态，并演示了如何通过JavaScript获取已选中的复选框值。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML >
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form action="">
<input type="checkbox" name="chk_all" id="chk_all" />选择资料方式<br/>
<input type="checkbox" name="chk_list" id="chk_list_1" value="1" />图纸
<input type="checkbox" name="chk_list" id="chk_list_2" value="2" />样单
<input type="checkbox" name="chk_list" id="chk_list_3" value="3" />说明书

</form>
<script type="text/javascript">
$("#chk_all").click(function(){
		/* 设置全选 */
		if($("#chk_all").attr("checked") == "checked"){
			 $("input[name='chk_list']").attr("checked",true);
		}else{ /* 取消全选 */
			$("input[name='chk_list']").attr("checked",false);
		}
    	getVal();
});
/* 获取被选择的值 */
function getVal(){
	 var arrChk=$("input[name='chk_list']:checked");
    $(arrChk).each(function(){
       window.alert(this.value);                        
    }); 
}
</script>
</body>
</html>