HTML、CSS、Jquery综合练习之全选、全不选与反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选、全不选与反选示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#selectAll").click(function(){
$(".checkBox").prop('checked', true);
});
$("#unselectAll").click(function(){
$(".checkBox").prop('checked', false);
});
$("#reverseSelection").click(function(){
$(".checkBox").each(function(){
$(this).prop('checked', !$(this).prop('checked'));
});
});
});
</script>
</head>
<body>
<button id="selectAll">全选</button>
<button id="unselectAll">全不选</button>
<button id="reverseSelection">反选</button>
<form action="">
<input type="checkbox" class="checkBox" name="option1" value="option1">选项1<br>
<input type="checkbox" class="checkBox" name="option2" value="option2">选项2<br>
<input type="checkbox" class="checkBox" name="option3" value="option3">选项3<br>
<input type="checkbox" class="checkBox" name="option4" value="option4">选项4<br>
</form>
</body>
</html>这段代码使用jQuery实现了全选、全不选和反选的功能。点击相应的按钮会对页面上的复选框进行相应的操作。这是一个简单的示例，但在实际开发中可以根据需要进行扩展和应用。
评论已关闭