My form currently contains this code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>
Instead of showing the radio buttons as radio buttons, I'd like to make them look like regular buttons, like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>
I have radios and I want to make them look like toggleable buttons. How am I supposed to do that with Bootstrap?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Bootstrap 4 now offers a toggleable button group that manages the active state for you on click.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
jsfiddle-link
getbootstrap
You could try looking at button groups, this is a goup of - well- buttons... which is toggleable like a radiobutton.
JSFiddle
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Hope this helps!
Related
here i am trying to toogle radio button
here it is i want answer like this
i tried for this like
<label class=" btn-lg btn-primary btn-block">
<input type="radio" :id="choice.id" >Answer {{choiceKey+1}} {{ choice.choice }}
</label>
but it get all color like this
You don't necessarily need JS for this, you can do it CSS-only with the adjacent sibling selector (+). Rough example below:
input[type=radio] {
display: none;
}
input[type=radio]:not(:checked) + label {
background-color: gray;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="something" id="radio_1">
<label for="radio_1" class="btn-lg btn-primary btn-block">Answer 1</label>
<input type="radio" name="something" id="radio_2" checked>
<label for="radio_2" class="btn-lg btn-primary btn-block">Answer 2</label>
<input type="radio" name="something" id="radio_3">
<label for="radio_3" class="btn-lg btn-primary btn-block">Answer 3</label>
<input type="radio" name="something" id="radio_4">
<label for="radio_4" class="btn-lg btn-primary btn-block">Answer 4</label>
Edited. I think it's more what you're looking for.
Starting point, in the Bootstrap docs, see here. For this approach you will need jQuery.
Also note that each radio button needs the same name attribute so they all work together; when you click one, the others turn off.
$("input[type=radio]").change(function() {
// remove the background color from all labels.
$("label").removeClass("btn-primary");
// add the background only to the parent-label of the clicked button.
$(this).parent().addClass("btn-primary");
});
label {
border: 1px solid #204d74 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-block active">
<input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
</label>
<label class="btn btn-block">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-block">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>
How do I make these two radio-button-groups independent?
If I select an answer in one row, it deselects the answer in the other row.
<!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>
In other words, I cannot choose None in the Test video-row and YouTube in the Test image-row at the same time.
Hope you can help me :)
change name="btnradio" in second row inputs to something else
I am using bootstrap 3.3.6 and I am trying to disable this type of radio btn-group. I've tried placing the disabled on both the label and input, but it doesn't seem to work. The buttons would appear as disabled but still clickable. Whenever I click the buttons, an active class will be added.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled="disabled">NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled="disabled">YES
</label>
</div>
What am I doing wrong? Is it possible to disable the buttons?
For demo find below link of jsfiddle
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 1 (pre-checked)
</label>
<label class="btn btn-primary active disabled">
<input type="radio" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary disabled">
<input type="radio" autocomplete="off"> Radio 3
</label>
</div>
Demo
The disabled attribute on the input will disable it, as in, you cannot change the value of the input while it's disabled. What you're seeing are the CSS stypes added by bootstrap that make it sorta look like something changed when you remove your mouse from the input.
You can prevent these styles with a little bit of jQuery:
$(".btn.disabled").mouseout(function(){
$(this).removeClass("active");
$(this).addClass("disabled");
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="0" disabled>NO
</label>
<label class="btn btn-default disabled">
<input type="radio" class="toggle" value="1" disabled>YES
</label>
</div>
How do I separate two radio button groups ? Each line have to be checked separately, see in the example below :
<div id="group1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
<div id="group2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</div>
https://jsfiddle.net/vzn6x7z6/
Thanks
You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.
updated jsFiddle
<form>
<fieldset>
<div id="group1" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton" name="options" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton" name="options" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton" name="options" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
<fieldset>
<div id="group2" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton2" name="options1" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton2" name="options1" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton2" name="options1" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
</form>
Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.
Put them in 2 separate fieldsets instead of a div and it should work:
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</fieldset>
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</fieldset>
I have 3 different sets of radio buttons on the same page. The problem I am experiencing with them is that when a button in another btn-group is pressed it will toggle the state of the buttons in the previous or next btn-group. They don't seem to be independent. Here's the code:
<div id="file1" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup2" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup2"onClick="$('#mandatory1').val('no');">No</button>
</div>
<div id="file2" class="btn-group" data-toggle="buttons-radio" >
<button class="btn btn-primary" type="radio" name="radioGroup" value="yes">Yes</button>
<button class="btn btn-danger" type="radio" name="radioGroup" onClick="$('#mandatory2').val('no');">No</button>
</div>
When a button within div file1 is clicked it toggles the state of a button in div id file2
I've tried using button.js with this, but no luck.
I've tried various different variations of data-toggle="button"
Any ideas?
Demo
Your HTML structure for bootstrap radio buttons is wrong.
<div id="file1" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option1" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option1" /> No
</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons" >
<label class="btn btn-primary">
<input type="radio" name="option2" /> Yes
</label>
<label class="btn btn-danger">
<input type="radio" name="option2" /> No
</label>
</div>
Aside:
You're using jQuery; Please don't use onClick in your HTML. You would set up those events like this (though there is a way that involves less code).
$(function(){
$('.btn').button(); // this is for the radio buttons.
// this replaces your inline JS
$('#file1 .btn-danger').on('click', function(){
$('#mandatory1').val('no');
});
$('#file2 .btn-danger').on('click', function(){
$('#mandatory2').val('no');
});
});
Demo
this should fix your problem:
<div id="file1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active"><input type="radio" name="radioGroup2" value="yes">Yes</label>
<label class="btn btn-danger"><input type="radio" name="radioGroup2" onclick="$('#mandatory1').val('no');">No</label>
</div>
<div id="file2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"><input type="radio" name="radioGroup" value="yes">Yes</label>
<label class="btn btn-danger active"><input type="radio" name="radioGroup" onclick="$('#mandatory2').val('no');">No</label>
</div>