如何在同组radio单选按钮间添加文本且保持单选互斥特性

问题原因 #

HTML 单选框（type="radio"）的分组规则是拥有相同name属性值的单选框会被归为同一组，同一组内同时只能有一个被选中。你当前的代码中两个单选框都未设置name属性，因此会被默认识别为独立分组，和中间插入的「OR」文本没有关联。

解决方案 #

给两个单选框添加相同的name属性值即可，示例修改后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
</head>
<body>
    <input type="radio" name="choice" id="choice1"> <label for="choice1">This_1</label> <br> 
    or <br>
    <input type="radio" name="choice" id="choice2"> <label for="choice2">This_2</label>
</body>
</html>

额外优化说明 #

上面示例中额外添加了id属性和<label>标签关联单选框和对应文本，用户点击This_1/This_2文字时也能选中对应单选框，提升交互体验。

内容的提问来源于stack exchange，提问作者Anuj Tanwar