jQuery点击按钮或复选框显示、隐藏文本框功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 控制文本框显示与隐藏</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 当复选框被点击时
$("#toggleCheckbox").click(function() {
// 根据复选框的选中状态来显示或隐藏文本框
$("#textInput").toggle(!this.checked);
});
// 当按钮被点击时
$("#toggleButton").click(function() {
// 显示或隐藏文本框
$("#textInput").toggle();
});
});
</script>
</head>
<body>
<label for="toggleCheckbox">隐藏文本框：</label>
<input type="checkbox" id="toggleCheckbox">
<button id="toggleButton">切换显示/隐藏</button>
<input type="text" id="textInput" style="display: none;">
</body>
</html>这段代码使用jQuery实现了通过点击按钮或复选框来控制文本框的显示和隐藏。当复选框被点击时，如果复选框被选中，则文本框会被隐藏。当按钮被点击时，文本框会在显示和隐藏之间切换。
评论已关闭