需求三个按钮的状态同时显示
时间: 2023-11-11 10:06:51 浏览: 17
可以使用以下代码来实现三个按钮的状态同时显示:
```html
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<script>
const button1 = document.getElementById("button1");
const button2 = document.getElementById("button2");
const button3 = document.getElementById("button3");
function updateButtonState() {
const buttons = [button1, button2, button3];
// Check if all buttons are disabled
const allDisabled = buttons.every(button => button.disabled);
// Check if all buttons are enabled
const allEnabled = buttons.every(button => !button.disabled);
// Update button states
if (allDisabled) {
buttons.forEach(button => button.disabled = false);
} else if (allEnabled) {
buttons.forEach(button => button.disabled = true);
}
}
// Add event listeners to buttons
button1.addEventListener("click", updateButtonState);
button2.addEventListener("click", updateButtonState);
button3.addEventListener("click", updateButtonState);
</script>
```
这段代码会将三个按钮的状态同步更新,当所有按钮都被禁用时,它们会变成可用状态,反之亦然。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)