Html 从按钮组中只选择一个按钮

Selecting only one button from button-group

提问by Christofer Hansen

I want to create a button group, where button from a group can be selected at once.

我想创建一个按钮组，可以一次选择组中的按钮。

Let's suppose we have got three buttons, the user should be able to select only one button, so if user selects "Apple" then they shouldn't be able to select the Apple button again.

假设我们有三个按钮，用户应该只能选择一个按钮，所以如果用户选择“Apple”，那么他们应该不能再次选择 Apple 按钮。

The main purpose will be to stop user selecting the button which is already selected.

主要目的是阻止用户选择已选择的按钮。

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
</div>

How can I solve this?

我该如何解决这个问题？

回答by Dip Lern Ing

This seems to be exactly what are you searching for.

这似乎正是您要寻找的。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Apple
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Samsung
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Sony
  </label>
</div>

You can read more about this under this link. This is how it looks like:

您可以在此链接下阅读更多相关信息。这是它的样子：

回答by AleshaOleg

You should use radiobuttons in this way.

您应该以这种方式使用单选按钮。

body {
 font-family: sans-serif;
 font-weight: normal;
 margin: 10px;
 color: #999;
 background-color: #eee;
}

form {
 margin: 40px 0;
}

div {
 clear: both;
 margin: 0 50px;
}

label {
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

input.radio:empty {
 margin-left: -999px;
}

input.radio:empty ~ label {
 position: relative;
 float: left;
 line-height: 2.5em;
 text-indent: 3.25em;
 margin-top: 2em;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

input.radio:empty ~ label:before {
 position: absolute;
 display: block;
 top: 0;
 bottom: 0;
 left: 0;
 content: '';
 width: 2.5em;
 background: #D1D3D4;
 border-radius: 3px 0 0 3px;
}

input.radio:hover:not(:checked) ~ label:before {
 content:'14';
 text-indent: .9em;
 color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
 color: #888;
}

input.radio:checked ~ label:before {
 content:'14';
 text-indent: .9em;
 color: #9CE2AE;
 background-color: #4DCB6D;
}

input.radio:checked ~ label {
 color: #777;
}

input.radio:focus ~ label:before {
 box-shadow: 0 0 0 3px #999;
}

<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">Apple</label>
</div>

<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Samsung</label>
</div>

<div> 
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Sony</label>
</div>

回答by Roy

For Bootstrap 4:

对于 Bootstrap 4：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

See the docs

查看文档

回答by Hearner

Buttonare used for buttons

Button用于按钮

<div class="btn-group btn-group-lg">
          <input type="radio" class="btn btn-primary" value="Apple" name="radio"> Apple
          <input type="radio" class="btn btn-primary" value= "Samsung" name="radio"> Samsung
          <input type="radio" class="btn btn-primary" value "Sony" name="radio"> Sony
</div>

Radios are <input type="radio">. If you want only one radio checked they have to get the same name.

收音机是<input type="radio">。如果你只想检查一台收音机，他们必须得到相同的 name。