要使文本区显示选择了哪些切换按钮,可以通过以下步骤实现:
以下是一个示例代码,演示如何实现上述功能:
HTML部分:
<!-- 切换按钮 -->
<button id="button1" onclick="toggleButton('button1')">按钮1</button>
<button id="button2" onclick="toggleButton('button2')">按钮2</button>
<button id="button3" onclick="toggleButton('button3')">按钮3</button>
<!-- 文本区 -->
<textarea id="textArea" rows="4" cols="50"></textarea>
JavaScript部分:
// 保存切换按钮的状态
var buttonStatus = {
button1: false,
button2: false,
button3: false
};
// 切换按钮的点击事件
function toggleButton(buttonId) {
var button = document.getElementById(buttonId);
buttonStatus[buttonId] = !buttonStatus[buttonId]; // 切换按钮的状态
updateTextArea(); // 更新文本区内容
}
// 更新文本区内容
function updateTextArea() {
var textArea = document.getElementById("textArea");
var text = "";
// 根据切换按钮的状态更新文本区内容
for (var buttonId in buttonStatus) {
if (buttonStatus[buttonId]) {
text += buttonId + "已选中\n";
}
}
textArea.value = text;
}
通过以上代码,当点击切换按钮时,按钮的状态会切换,并且文本区会显示选择了哪些切换按钮。你可以根据实际需求修改代码,添加样式和其他功能。
领取专属 10元无门槛券
手把手带您无忧上云