HTML表单中的单选按钮不能正常工作

我正在学习Javascript和HTML表单，我知道单选按钮。但问题是，当我为测试编写3个单选按钮时，不知何故它不起作用，当我检查"1"时;(这是一个名字)如果我选择另一个像&;2&;，它不会取消&;1&;!是我的浏览器有问题，还是我的代码有问题?我使用的是Microsoft Edge浏览器，这是我的代码:

<form>
<label for="html">This one is Html </label>
<input type="radio" name="html" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="css" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="javscript" id="javascript" value="JAVASCRIPT">
</form>

有谁知道我的问题是什么吗?

name属性为组。因此，如果您在单选按钮上设置相同的name，则它们处于同一组。

<form>
<label for="html">This one is Html </label>
<input type="radio" name="group1" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="group1" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="group1" id="javascript" value="JAVASCRIPT">
</form>

这很简单，您只需要为每个组使用相同的name，这里我使用codetype:

<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label for="html">This one is Html </label>
<input type="radio" name="codetype" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="codetype" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="codetype" id="javascript" value="JAVASCRIPT">
</form>
</body>
</html>

请您可以使用单选按钮，所有的单选按钮name设置相同，然后您选择在那个时候一个单选按钮

<form>
<label for="html">This one is Html </label>
<input type="radio" name="skill" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="skill" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="skill" id="javascript" value="JAVASCRIPT">
</form>

只需为每个组使用相同的name属性值。

<form>
<label for="html">This one is Html </label>
<input type="radio" name="radio_button" id="html" value="HTML">
<br>
<label for="css">This one is Css</label>
<input type="radio" name="radio_button" id="css" value="CSS">
<br>
<label for="javscript">This one is Javascript</label>
<input type="radio" name="radio_button" id="javascript" value="JAVASCRIPT">
</form>

相关内容

最新更新

热门标签：