如何选中复选框并在文本框中显示值以及未选中复选框时不显示值
要实现这个功能，你可以使用HTML、CSS和JavaScript来完成。以下是一个简单的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox and Textbox Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<label>
<input type="checkbox" id="myCheckbox">
Show Value
</label>
<input type="text" id="myTextbox" disabled>
</div>
<script src="script.js"></script>
</body>
</html>CSS部分（可选）
/* styles.css */
.container {
margin: 20px;
}
label {
margin-right: 10px;
}
input[type="text"] {
margin-top: 10px;
}JavaScript部分
// script.js
document.addEventListener('DOMContentLoaded', function() {
const checkbox = document.getElementById('myCheckbox');
const textbox = document.getElementById('myTextbox');
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
textbox.value = 'Checked';
textbox.disabled = false;
} else {
textbox.value = '';
textbox.disabled = true;
}
});
});解释
- HTML部分：
- 创建了一个复选框和一个文本框。
- 复选框的ID为
myCheckbox，文本框的ID为myTextbox。
- CSS部分：
- 可选的样式，用于美化页面布局。
- JavaScript部分：
- 使用
DOMContentLoaded事件确保DOM完全加载后再执行脚本。 - 获取复选框和文本框的引用。
- 为复选框添加
change事件监听器，当复选框状态改变时，更新文本框的值和禁用状态。
- 使用
应用场景
这个功能可以用于各种需要根据复选框状态显示或隐藏文本框值的场景，例如：
- 表单验证
- 功能开关
- 数据过滤
参考链接
通过这种方式，你可以轻松实现复选框选中时在文本框中显示值，未选中时不显示值的功能。
相关·内容
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
