js 全选全不选反选提交

最新推荐文章于 2024-02-29 11:50:54 发布

chaojie2009

最新推荐文章于 2024-02-29 11:50:54 发布

阅读量1.7k

点赞数

分类专栏： js文章文章标签： function input button xhtml jquery action

本文链接：https://blog.csdn.net/chaojie2009/article/details/6717296

版权

js文章专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title></title>
 <!--   引入jQuery -->
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
     //全选
     $("#CheckedAll").click(function(){
	     $('[name=items]:checkbox').attr('checked', true);
	 });
	 //全不选
     $("#CheckedNo").click(function(){
	    $('[type=checkbox]:checkbox').attr('checked', false);
	 });
	 //反选
     $("#CheckedRev").click(function(){
		  $('[name=items]:checkbox').each(function(){
			//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
			//$(this).attr("checked", !$(this).attr("checked"));
			
			//直接使用JS原生代码，简单实用
			this.checked=!this.checked;
		  });
	 });
	 //输出值
	$("#send").click(function(){
		var str="你选中的是：\r\n";
		$('[name=items]:checkbox:checked').each(function(){
			str+=$(this).val()+"\r\n";
		})
		alert(str);
	});
  })

  </script>
</head>
<body>
<form method="post" action="">
   你爱好的运动是？
   <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" id="CheckedAll" value="全　选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反　选"/> 

	<input type="button" id="send" value="提　交"/> 
</form>
</body>
</html>

chaojie2009

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 全选全不选反选提交

$(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked', true); }); //全不选 $
复制链接

扫一扫