Geek Answers Handbook

Select one button from a group of buttons

I want to create a group of buttons where a button from a group can be selected immediately.

Suppose we have three buttons, the user should be able to select only one button, so if the user selects "Apple", then they will not be able to select the Apple button again.

The main goal will be to stop the user selecting a button that 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?

+5
source share
4 answers

This seems to be exactly what you are looking 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 about it at this link . Here's what it looks like:

enter image description here

+12
source

You must use radio objects 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:'\2714'; text-indent: .9em; color: #C2C2C2; } input.radio:hover:not(:checked) ~ label { color: #888; } input.radio:checked ~ label:before { content:'\2714'; 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>
+1
source

Button used for buttons

 <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>

Radio stations <input type="radio"> . If you want only one radio station to be checked, they should get the same name .

0
source

For 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 documents

0
source

More articles:


All Articles