I have three buttons and each one has a CSS class. At click of one of them, i would like remove the class and add a new CSS class only for the clicked element. Furthermore, I need to keep pressed the selected button.
I searched some examples and I found that is possible do something like this:
$(".class").removeClass("choice").addClass("active");
This works for all buttons, but not only for one. I try to change this in
$(this).removeClass("choice").addClass("active");
but this didn't work.
I make a fiddle for more compreansion: https://jsfiddle.net/90u6b3tj/3/
EDIT
I need the same behavior when i press a second time
Sorry for the basic problem.
Thanks in advance
Regards
I've updated your jsfiddle for a working solution:
https://jsfiddle.net/90u6b3tj/10/
Here's the javascript part:
$(function() {
$("button").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
});
});
as you are adding your click events like so:-
<button id="hourly" class="choice" onclick="change()">Orario</button>
you could use event.target:-
function change(){
event.preventDefault();
$(event.target).removeClass("choice").addClass("active");
}
OR, change your event and pass in this:-
<button id="hourly" class="choice" onclick="change(this)">Orario</button>
so you can do:-
function change(element){
event.preventDefault();
$(element).removeClass("choice").addClass("active");
}
OR better still:-
$('.choice').click(function(e){
e.preventDefault();
$(this).removeClass("choice").addClass("active");
});
and remove the inline click event.
You can use the following code instead.
$(".class").click(function(){
$(".class").addClass("choice");
$(".class").removeClass("active");
$(this).removeClass("choice").addClass("active");
});
Here, the "choice" class is removed only from the clicked class. Not from the others. Also the "active" class is added to the clicked one.
You may use change(this) in your button markup and refer to that element in your change() function, as shown in this fiddle.
function change(event){
event.preventDefault();
//$(".choice").removeClass("choice").addClass("active");
$(event.target).removeClass("choice").addClass("active");
}
<div>
<button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>
<div>
<button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>
Should it possible so select more than one item as active?
If not, checkout this:
Markup
<div>
<button id="hourly" class="choice">Orario</button>
</div>
<div>
<button id="daily" class="choice">Giornaliero</button>
</div>
<div>
<button id="monthly" class="choice">Mensile</button>
</div>
CSS
.active {
background-color: #A60076;
color: #FF0000;
}
.choice {
background-color: #000000;
color: #FFFFFF;
}
JS
$(document).ready(function() {
$('button').click(function(e) {
$("button").addClass('choice').removeClass('active');
$(this).removeClass('choice').addClass('active');
});
});
Here is a sample fiddle with the above code working.
Related
I want to use JQuery on my Coldfusion application for showing/hiding div elements with checkbox checked/unchecked within the div.
Basically, in a view I show multiple divs elements, every div have also more divs inside, one of these internal divs contains an input type checkbox that could come checked or unchecked.
I also have three buttons in that view 'Active, Inactive, All'. When clicking on Active I want to show all div elements with checkbox checked, not showing the unchecked, and the other way around when clicking on Inactive.
<div class="btn-group ">
<button id="actives" type="button">Actives</button>
<button id="inactives" type="button">Inactives</button>
<button id="all" type="button">All</button>
</div>
<div id="apiDiv">
<cfloop array="#apis#" index="api">
<div class="card card-found">
<div class="card-header">
<cfif Len(api.iconClass)>
<i class="fa fa-fw #api.iconClass#"></i>
</cfif>
#structKeyExists( api, "name" ) ? api.name : api.id#
</div>
<div class="card-body">
<p>#api.description#</p>
</div>
<div class="card-button">
<input class="#inputClass# ace ace-switch ace-switch-3" name="#inputName#" id="#inputId#-#api.id#" type="checkbox" value="#HtmlEditFormat( api.id )#"<cfif ListFindNoCase( value, api.id )> checked="checked"</cfif> tabindex="#getNextTabIndex()#">
<span class="lbl"></span>
</div>
</div>
</cfloop>
</div>
I´m not an expert at all with JQuery. The only thing I have done is what follows and I do not know whether if is a good beggining or not:
$("#actives").click(function (e) {
$("#apiDiv .card").filter(function() {
<!--- code here --->
});
});
Someone please that can help me with it? Thanks a lot in advance!
After your CF code executes, it will generate a .card for each loop iteration of your apis array. So you jQuery code will need a click handler for the #actives button and that will loop through each() iteration of the checkboxes to determine the checked/unchecked state. At that point find the closest() ancestor .card and show()/hide() the .card depending upon the checkbox state.
$("#actives").click(function (e) {
$('input[type=checkbox]').each(function() {
if (this.checked) {
$(this).closest(".card").show();
} else {
$(this).closest(".card").hide();
}
});
});
If you want to do it with jQuery code:
$('#actives').click(function(){
$('#apiDiv').show();
});
Working Fiddle
The code you are probably looking for is in these event handlers for your buttons:
function activesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").show();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").hide();
}
function inactivesHandler() {
jQuery(".card-button > input:checked").parents(".card.card-found").hide();
jQuery(".card-button > input:not(:checked)").parents(".card.card-found").show();
}
function allHandler() {
jQuery(".card.card-found").show();
}
jQuery("#actives").click(activesHandler);
jQuery("#inactives").click(inactivesHandler);
jQuery("#all").click(allHandler);
I reproduced some of your ColdFusion by replacing it with JavaScript and provided a demonstration of the above event handlers in this JSFiddle.
Call the checkbox by its id and when it's checked, write a function to display the divs you want to display:
<input type="checkbox" id="check">
$document.getElementById("check").onclick = function(){
$document.getElementById("div_name").style.display="block"; // block displays the div.
}
Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
I have 4 divs like this, with class work:
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
And I want to toggle clicked class to clicked div:
.clicked {
font-size: 25px;
}
How to do it?
$('.work').on('click', function() {
$(this).toggleClass('clicked');
})
Geez, why couldn't you just go check the documentation!
There is a function in jquery named toggleClass.
You should attach a click event to your div and then use this to reference to the clicked element.
$('.work').click(function() { // edited: from $(.work) to $('.work')
$(this).toggleClass("click")
})
Here you go with a solution https://jsfiddle.net/7ep3e4gn/
$('div.work').click(function(){
$(this).addClass('clicked').siblings('div.work').removeClass('clicked');
});
.clicked {
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<img src="panda.jpg">
<h3>Panda</h3>
<p>Panda eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda2</h3>
<p>Panda2 eats apple.</p>
</div>
<div class="work">
<img src="panda.jpg">
<h3>Panda3</h3>
<p>Panda3 eats apple.</p>
</div>
I've used addClass & removeClass along with jQuery siblings method.
Hope this will help you.
Jquery has a method just for that.
$('.work').click(function(e) {
$(e.target).closest('.work').toggleClass('clicked');
});
The .closest() is in case the click was registered on the contained image, etc.
If you want only one of the div's with the class .work to have the .clicked class at a time, here's what you do:
$('.work').on('click', function() { //When the div 'work' is clicked
$('.work').removeClass('clicked'); //Remove the class 'clicked' from all divs named 'work'
$(this).addClass('clicked'); //Add the class 'clicked' to the div that was clicked.
});
Here's a fiddle for the same.
I am trying to make a form with multiple checkboxes. I want to highlight the checkboxes with their content to indicate to the user of the selection
I am using the following layout for my form
HTML
<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>
CSS
.labl{
height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}
jQuery
<script>
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});
</script>
Now when alpha is checked it should change the class of div from labl to chkedbut it is not
You need a DOM ready handler like this $(function(){...});
$(function () {
$("input[type=checkbox]").change(function () {
$(this).parent().toggleClass("chked");
});
});
Documentation
Update
It appears that the checkbox is dynamically added to the DOM so you must use event delegation like this
$(document).on("change","input[type=checkbox]",function () {
$(this).parent().toggleClass("chked");
});
You can pass both the class names to the toggleClass() method, so that only one of the will be applied at a time
jQuery(function(){
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("labl chked");
});
})
Demo: Fiddle
just change your script to
$("input[type=checkbox]").change(function() {
$(this).parents('.labl').toggleClass("chked");
});
And your HTML to
<form>
<div class='labl'>
<input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>
Here is the updated fiddle
http://jsfiddle.net/k242J/
toggleClass functionality is to check the class, if not there it will add, else remove class thats it. its not to change from one class to another.
css
.chked {
background: #4285f4;
}
js
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});
With selected the hasClass validation works correctly.
<div class="row dis">
<input class="contact button selected" value="Contact Us">
</div>
However if i remove the selected through jquery:
<div class="row dis">
<input class="contact button" value="Contact Us">
</div>
if (!$('.dis > .contact').hasClass('disabled')) {
$("input.contact").click(function() {
alert('---');
$('.contact').addClass('disabled');
});
}
the hasClass still not find the disabled class after $('.contact').addClass('disabled');.
So, i only want the first alert.
Demo:
http://jsfiddle.net/dWGNJ/2/
You could do it like this..
$('input.contact').on('click',function(){
if( !$(this).hasClass('disabled') )
{
alert('---');
$(this).addClass('disabled');
}
});
Basically, when input.contact is clicked, check if it has the class .disabled - if it doesn't then trigger the alert and add the class .disabled - which in turn prevents it from triggering the second time it's clicked
Or you could have a slightly more elegant way of doing it:
$('.dis').on('click','input.contact:not(.disabled)',function(){
alert('---');
$('.contact').addClass('disabled');
});
Same concept.
There's no .disabled element when your JS runs, so, no .contact is binded with click().