plu*_*800 1 html radio-button bootstrap-5
如何使这两个单选按钮组独立?
如果我在一行中选择一个答案,它将取消选择另一行中的答案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
<title>Hello, world!</title>
</head>
<body class="p-3">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<span class="input-group-text me-2 rounded" id="inputGroup-sizing-md">Test video</span>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">YouTube</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Own video</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">None</label>
</div>
</div>
<div class="btn-toolbar mt-3" role="toolbar" aria-label="Toolbar with button groups">
<span class="input-group-text me-2 rounded" id="inputGroup-sizing-md">Test image</span>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio4">YouTube</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio5">Own image</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio6">None</label>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
换句话说,我不能同时None在Test video-row 和YouTube-row中进行选择。Test image
希望你能帮我 :)