单选按钮选中时添加类，未选中时删除类

是一种常见的前端开发技术，用于在用户选择单选按钮时动态改变元素的样式或行为。通过添加或删除类，可以实现对元素的样式、动画、事件等进行控制。

具体实现方式可以使用JavaScript来操作DOM元素，通过监听单选按钮的状态变化事件，当单选按钮被选中时，使用classList.add()方法添加指定的类名，当单选按钮未被选中时，使用classList.remove()方法移除指定的类名。

以下是一个示例代码：

HTML:

<input type="radio" name="option" id="option1">
<label for="option1">Option 1</label>

<input type="radio" name="option" id="option2">
<label for="option2">Option 2</label>

<div id="target">This is the target element</div>

CSS:

.selected {
  color: red;
  font-weight: bold;
}

JavaScript:

const option1 = document.getElementById('option1');
const option2 = document.getElementById('option2');
const target = document.getElementById('target');

option1.addEventListener('change', function() {
  if (this.checked) {
    target.classList.add('selected');
  } else {
    target.classList.remove('selected');
  }
});

option2.addEventListener('change', function() {
  if (this.checked) {
    target.classList.add('selected');
  } else {
    target.classList.remove('selected');
  }
});

在上述代码中，我们定义了两个单选按钮(option1和option2)，以及一个目标元素(target)。当单选按钮被选中时，通过添加类名"selected"来改变目标元素的样式。

这种技术可以应用于各种场景，例如在表单中根据用户选择的选项显示不同的内容、实现交互式的导航菜单等。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 腾讯云人工智能：https://cloud.tencent.com/product/ai
• 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
• 腾讯云安全产品：https://cloud.tencent.com/product/safety