用jQuery实现元素被点击选中的效果

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<h2>用jQuery实现元素被点击选中的效果</h2>
<div class="box">
    <div>元素1</div>
    <div>元素2</div>
    <div>元素3</div>
    <div>元素4</div>
    <button id="all-selected">全选/取消全选</button>
</div>

<style>
	h2 {
		text-align: center;
	}
	.box{
		display:flex;
		border:1px solid #aaabad;
		width:700px;
		margin:auto;
	}
	/*给盒子设置样式*/
	.box>div {
		border: 3px solid dodgerblue;
		margin: 30px auto;
		padding: 15px;
		border-radius: 10px;
		/* 定义元素的变化参数，持续时间0.5s，元素所有属性都变化 */
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-moz-transition: all 0.5s;
	}
	/*为盒子添加伪类，实现鼠标放到元素上的效果*/
	.box>div:hover {
		/* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */
		transform: scale(1.2, 1.2);
	}
	/* 元素被选中时的效果 */
	.selected {
		box-shadow: 0 0 15px deepskyblue;
		/* 定义变化的效果，盒子的长和宽均变为原来的1.2倍 */
		transform: scale(1.2, 1.2);
	}
	#all-selected {
		width:100px;
		height:35px;
		border-radius:5px;
		display:inline-block;
		margin: 40px 25px 25px;
		transition:all 0.5s;
	}
	#all-selected:hover{
		background-color:#c9c9c9;
	}
</style>

<script>
    // 设置一个变量symbol，来判断当前的状态是否为选中
    let symbol = true;
	$(document).ready(function () {
        // 为box盒子添加点击事件
        $(".box>div").click(function () {
            if (symbol === true) {
                // 当symbol的值为true时，为点击的元素添加"selected"属性
                $(this).addClass("selected");
                // 同时symbol的值取反
                symbol = false;
            } else {
                // 当symbol的值为false时，移除"selected"属性
                $(this).removeClass("selected");
                // symbol的值取反
                symbol = true;
            }
        });
        // 为“全选”按钮添加全选事件
        $("#all-selected").click(function () {
            if (symbol === true) {
                $(".box>div").addClass("selected");
                symbol = false;
            } else {
                $(".box>div").removeClass("selected");
                symbol = true;
            }
        });
    });
</script>