js练习（全选/反选/变色）

最新推荐文章于 2022-03-21 14:40:20 发布

3kcxj3

最新推荐文章于 2022-03-21 14:40:20 发布

阅读量206

点赞数 1

分类专栏：学习记录文章标签： js

本文链接：https://blog.csdn.net/qq_29035181/article/details/104458785

版权

学习记录专栏收录该内容

23 篇文章 0 订阅

订阅专栏

js练习（全选/反选/变色）

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js练习</title>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
	<p style="background-color: red; width: 80px; height: 40px" id="x">我是中国人</p>
	<button value="yellow">黄色</button>
	<button value="green">绿色</button>
	<button value="white">白色</button>
	<button value="blue">蓝色</button>
	<script>
      //书写js语言前，先设置一个上下文的加载
      /*
         $(document).ready(function(){
         });
         简化后：
      */
      $(function(){
    	   //给所有的button按钮安装点击事件，好处是可以让html语言和javascirpt分离，避免耦合
    	   $("button").click(function(){
    		  //获取当前被点的按钮中value属性
    		  var x= $(this).val();
    		  //设置背景色为value值x
    		  $("#x").css("background-color",x);
    	   });     
      });
   </script>
	<hr>
	<form action="" id="f">
		爱好:<input type="checkbox" name="love" value="足球">足球 <input
			type="checkbox" name="love" value="排球">排球 <input
			type="checkbox" name="love" value="篮球">篮球 <input
			type="button" id="one" value="全选/反选"> <input type="button"
			id="all" value="全选"> <input type="button" id="noall"
			value="反选">
	</form>
	<script>
       $(function(){
    	   //这个是给按钮安装一个点击事件，如果点击事件触发了执行回调函数
    	   $("#one").click(function(){
    		   //本身应该是显示3个复选框的checked的值，但是显示的时候默认只显示第一个
    		   console.log($("[name=love]").prop("checked"));
    		  //循环遍历[name=love]
    		   $.each($("[name=love]"),function(i,obj){
    			   //反选，没有选中的被选中，选中的被取消
    			   obj.checked=!obj.checked;
    		   }); 
    	   });
    	   
    	   $("#all").click(function(){
    		 	//全部选中
    		    $("[name=love]").prop("checked",true);
    	   });
    	   
    	   $("#noall").click(function(){
    		 //全部不选中
   		    $("[name=love]").prop("checked",false);
   	       });
       });
   </script>
</body>
</html>

3kcxj3

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js练习（全选/反选/变色）

js练习（全选/反选/变色）<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>j...
复制链接

扫一扫