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>