在Jupyter Notebook（Markdown部分）创建Radio Button时单选功能异常的解决方法咨询

我来帮你搞定这个问题！你遇到的情况确实和Colab对Markdown中HTML的特殊渲染机制有关——Colab会对嵌入的HTML做沙箱化隔离处理，导致原本靠相同name属性分组的单选按钮无法被浏览器正确识别，最终变成了类似复选框的多选状态。下面给你两种实用的解决方案：

方法1：使用原生IPyWidgets（推荐） #

Colab完全支持IPython Widgets，这是在Notebook里实现交互控件的更可靠方式，能完美保证单选功能正常，还能方便后续获取选中值。你只需要在代码单元格中运行以下代码：

import ipywidgets as widgets
from IPython.display import display

# 创建单选按钮组
language_radio = widgets.RadioButtons(
    options=['HTML', 'CSS', 'JavaScript'],
    description='偏好语言:',
    disabled=False
)

# 显示控件
display(language_radio)

运行后会出现原生的单选按钮组，默认只能选中一个选项，你还可以通过language_radio.value随时获取当前选中的值，非常适合后续的交互逻辑。

方法2：修复HTML代码（通过JavaScript强制分组） #

如果你一定要用HTML嵌入的方式，可以添加一段JavaScript来手动控制单选行为，绕过Colab的渲染隔离。把以下代码直接放到Markdown单元格中即可：

<div id="language-group">
  <input type="radio" id="html" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" value="JavaScript">
  <label for="javascript">JavaScript</label>
</div>

<script>
// 获取组内所有单选按钮
const radioButtons = document.querySelectorAll('#language-group input[type="radio"]');

// 为每个按钮添加点击事件，强制单选逻辑
radioButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    radioButtons.forEach(otherBtn => {
      if (otherBtn !== this) otherBtn.checked = false;
    });
  });
});
</script>

这段代码会手动控制同一分组内的按钮状态：点击其中一个按钮时，自动取消其他按钮的选中状态，完美模拟原生单选按钮的行为。

为什么原来的代码失效？ #

Colab的Markdown渲染器会对嵌入的HTML元素做特殊处理，可能会修改元素的name属性，或者将每个元素放在独立的渲染上下文中，导致浏览器无法识别它们属于同一单选组。用JavaScript手动控制或者使用原生Widget就能避开这个限制。

内容的提问来源于stack exchange，提问作者Jean-Francois T.