jQuery 简单练习(复选框,隐藏样式,隐藏图片)

设计一个复选框功能,要求可以全选和全取消
假设有一个图文混排的页面,要求设计一个按钮,当用户点击该页面能使所有图片和文字增加美化效果,再次点击取消,再设计一个按钮,当用户点击能够显示或者隐藏图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work1</title>
    <style>

    </style>
</head>
<body>
<button id="con">全选</button>
<label>
  <input type="checkbox" class="all">1
  <input type="checkbox" class="all">2
  <input type="checkbox" class="all">3
  <input type="checkbox" class="all">4
</label>
<script src="js/jquery-3.6.0.js"></script>
<script>
	$(document).ready(function () {
    
    
		$("#con").click(function () {
    
    
          let x = $(".all").prop("checked");
            if (x === true) {
    
    
              $(".all").prop("checked",false);
            } else {
    
    
              $(".all").prop("checked",true);
            }
		})
	})
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work1</title>
    <style>
        .a {
    
    
            color: #1d7db1;
        }
        img {
    
    
            width: 500px;
            height: 300px;
        }
        .test {
    
    
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
</head>
<body>
<button id="con1">美化</button>
<button id="con2">图片</button>
<br>
<label>
    high good a boy
</label>
<br>
<img src="img/moon.png" alt="moon">
<br>
<img src="img/weather.png" alt="weather">


<script src="js/jquery-3.6.0.js"></script>
<script>
	$(document).ready(function () {
    
    
		$("#con1").click(function () {
    
    
			let x = $("label").attr("class");
			if (x === "a") {
    
    
				$("label").removeClass("a");
			} else {
    
    
				$("label").addClass("a");
			}
			x = $("img").attr("class");
			if (x === "test") {
    
    
				$("img").removeClass("test");
			} else {
    
    
				$("img").addClass("test");
			}
		})
        $("#con2").click(function () {
    
    
            let css = $("img").css("display");
			if (css === "none") {
    
    
				$("img").css("display","block");
            } else {
    
    
				$("img").css("display","none");
            }
        })
	})
</script>
</body>
</html>

jQuery 简单练习(复选框,隐藏样式,隐藏图片)

おすすめ