首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

以下是一个示例代码:

HTML:

代码语言:txt
复制
<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:

代码语言:txt
复制
.selected {
  color: red;
  font-weight: bold;
}

JavaScript:

代码语言:txt
复制
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
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券