I am kinda new to javascript and I checked lessons on w3 about javascript but i did not get my answer so far.
I have a question and 4 options and I want to change the color of label.btn that clicked on.
javascript:
$(function(){
$("label.btn").on('click',function () {
var choice = $(this).find('input:radio').val();
$( "#answer" ).html( $(this).checking(choice) );
ClickedLabel.style.backgroundColor = "black"; // I want to change te color here
});
///
};
html:
<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>
Any help would be appreciated, Thanks!
A)
Run my code and switch between the options.
$(function(){
$("label.btn").on('click',function () {
$("label.btn").css('background-color','transparent');
$(this).css('background-color','red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>
OR
In this example I used the closest method to find the wrapper label of the clicked radio button and used .css('background-color','red') to change its color. Also I wrote $("label.btn").css('background-color','transparent'); to reset the color of all options to transparent in each click first.
$(function(){
$("input").on('click',function () {
$("label.btn").css('background-color','transparent');
$(this).closest("label").css('background-color','red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>
B)
Another way is to toggle a active class on the clicked item. I have been written an example based on this way HERE. Toggle a class is a nice way ;)
$(this) will be the label that was clicked. You can use jquery to change the background color through .css
Instead of
ClickedLabel.style.backgroundColor = "black";
you can use
$(this).css('background-color', 'black');
If you would rather use style.backgroundColor you can get the base element and modify that:
$(this)[0].style.backgroundColor = "black";
$(this).css("background-color","black");
Related
I'm trying to refactor a small Javascript function that simply adds an active class to the parent <div> of a series of radio buttons on page load as well as via a change.
My function is:
function toggleActiveState (event) {
const el = event.target
const parent = el.closest('[data-toggle-has-btn-group]')
const buttons = parent.getElementsByClassName('js__btn-toggle')
var i
for (i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('active')
}
el.parentElement.classList.add('active')
}
My markup is:
<div class="form-group">
<div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group>
<label class="btn btn-custom btn-outline-primary btn-sm active flex-fill mr-1 js__btn-toggle">
<input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle">
<input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other
</label>
</div>
</div>
When clicking a radio button, the toggleActiveState(event) runs and I'm able to remove the active classes and add a class to the input I clicked.
I have multiple of these .btn-group-toggle elements on the page.
What I need to do is be able to set the active class state of say the Mrs element on page load and it's value by calling my function like so:
toggleActiveState('options', 'Mrs') and then this would be active, and selected...
Any ideas?
You can add event listener on window load and add the class there. Like I've done below based on your code.
function toggleActiveState (event) {
const el = event.target
const parent = el.closest('[data-toggle-has-btn-group]')
const buttons = parent.getElementsByClassName('js__btn-toggle')
var i
for (i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('active')
}
el.parentElement.classList.add('active')
}
window.addEventListener('load', () => {
const checkedInput = document.querySelector('input[type="radio"]:checked');
checkedInput.parentElement.classList.add('active');
})
.active {
color: red;
}
<div class="form-group">
<div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mr-1 js__btn-toggle">
<input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle">
<input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other
</label>
</div>
</div>
I have the following html displaying a scale 1-5, I get the value that is clicked but it seems as it does not toggle or change the color when a number is clicked it only changes the color temporarily as shown in file attached
<div class="row">
<div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="likert group">
<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
<a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
<label class="btn btn-success" >
<input type="radio" name="likert" value="1" autocomplete="off">1
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="2" autocomplete="off">2
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="3" autocomplete="off">3
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="4" autocomplete="off">4
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="5" autocomplete="off">5
</label>
<a class="btn btn-link disabled" disabled>Very Much</a>
</div>
</div>
</div>
</div>
How can I make it maintain the toggle effect once it is selected?Is there something missing from the above code ?
(I use Meteor Blaze framework with Bootstrap 4)
The solution was to add the below javascript file of npm module in meteor js file
import 'bootstrap/dist/js/bootstrap.bundle'
How to add 'active' on label class like after checking value from database with laravel {{$user->experience}} . if value is Entry-Level add 'active' on label class .
Here is my HTML Content
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active" for="option1">
<input type="radio" name="experience" id="option1" value="Student">Student
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="experience" id="option2" value="Entry-Level">Entry-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="experience" id="option3" value="Mid-Level">Mid-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="experience" id="option4" value="Senior-Level">Senior-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="experience" id="option5" value="Manager">Manager
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="experience" id="option6" value="Director" >Director
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
Here is my css
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
My laravel value fetching
{{$user->experience}}
Mysql 'user' Table
- id name experience
- 1 john Entry-Level
Website : JsFeed
You can use ternary operators to achieve your goal.
<label
class="btn btn-success {{$user->experience == 'Entry-Level' ? 'active' : ''}}"
for="option1"
>
You can use ternary operator to achieve this or you can use If.
{{$user->experience == 'Entry-Level'?'active':''}}
Here is an example.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success {{$user->experience == 'Entry-Level'?'active':''}}" for="option1">
<input type="radio" name="experience" id="option1" value="Student">Student
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="experience" id="option2" value="Entry-Level">Entry-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="experience" id="option3" value="Mid-Level">Mid-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="experience" id="option4" value="Senior-Level">Senior-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="experience" id="option5" value="Manager">Manager
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="experience" id="option6" value="Director" >Director
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
Use a ternary operator to toggle the class active and the checked attribute
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success {{$user->experience == 'Student'?'active':''}}" for="option1">
<input type="radio" name="experience" id="option1" {{$user->experience == 'Student'?'checked':''}} value="Student">Student
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary {{$user->experience == 'Entry-Level'?'active':''}}" for="option2">
<input type="radio" name="experience" id="option2" {{$user->experience == 'Entry-Level'?'checked':''}} value="Entry-Level">Entry-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info {{$user->experience == 'Mid-Level'?'active':''}}" for="option3">
<input type="radio" name="experience" id="option3" {{$user->experience == '>Mid-Level'?'checked':''}} value="Mid-Level">Mid-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default {{$user->experience == 'Senior-Level'?'active':''}}" for="option4">
<input type="radio" name="experience" id="option4" {{$user->experience == 'Senior-Level'?'checked':''}} value="Senior-Level">Senior-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning {{$user->experience == 'Manager'?'active':''}}" for="option5">
<input type="radio" name="experience" id="option5" {{$user->experience == 'Manager'?'checked':''}} value="Manager">Manager
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger {{$user->experience == 'Director'?'active':''}}" for="option6">
<input type="radio" name="experience" id="option6" {{$user->experience == 'Director'?'checked':''}} value="Director" >Director
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
Let's say I would like to have 2 different button groups on my page.
<div class="btn-group fruits" role="group" aria-label="fruits" id="fruits">
<button type="button" name="fruits" class="btn btn-default">apple</button>
<button type="button" name="fruits" class="btn btn-default">cherry</button>
<button type="button" name="fruits" class="btn btn-default">melon</button>
</div>
<div class="btn-group vegetables" role="group" aria-label="vegetables" id="vegetables">
<button type="button" name="vegetables" class="btn btn-default">cucumber</button>
<button type="button" name="vegetables" class="btn btn-default">aubergine</button>
<button type="button" name="vegetables" class="btn btn-default">pepper</button>
</div>
Whenever I click on a button, the selected button on other group became deselected.
I have added, different "ids", "names", "classes" to each buttongroup and button. But unfortunately no success. How can I have multiple buttongroups on a page without affecting eachother?
All the examples on official bootstrap page are even like that. When you click on o buttongroup, other buttongroup deselected. Bootstrap Button Group
Thanks for any idea.
Here is what you can do.
Checkbox / Radio
Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.
$('input').on('change', function () {
console.clear();
console.log(this.value)
})
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
margin: 12px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" value="left" autocomplete="off"> Left
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="middle" autocomplete="off"> Middle
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="right" autocomplete="off"> Right
</label>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" value="left 2" autocomplete="off"> Left 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="middle 2" autocomplete="off"> Middle 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="right 2" autocomplete="off"> Right 2
</label>
</div>
</div>
</div>
</div>
I am using knockout binding for radio button with bootstrap.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="true" name="daysradio" >{{texts.showAll}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="30" name="daysradio" >{{texts.showOnly30Days}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="60" name="daysradio" >{{texts.showOnly60Days}}
</label>
<label class="btn btn-default">
<input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="90" name="daysradio" >{{texts.showOnly90Days}}
</label>
<!--
<label class="btn btn-default">
<span style="cursor:pointer" data-bind="click: function(){ filterClick(30) } ,css: { 'selectedFilter' : filterValue == 30 }"><u>30 </u></span>
</label>
-->
</div>
the probelm is when i use data-toggle=buttons then data-bind is not working
but if i remove this then data-binding works.
but in that case radio button style comes but i need button styles.
Could you please suggest any solution?
I used the mentioned custom binding and it worked for me. The deatails custom binding will be found on this custom biding by Roy J
<div class="btn-group" data-bind="radio: userType">
<button type="button" class="btn btn-primary" data-value="company">Main User</button>
<button type="button" class="btn btn-primary" data-value="person">Dummy user</button>