Develop Reference

If element hasClass, check the checkbox using jQuery

I have a class that adds a fake checkbox and using jQuery, once the user clicks it, add the checked state class to the fake checkbox.
CSS
.fake-checkbox { /* ... */ }
.fake-checkbox.checked-state { /* ... */ }
HTML
<label>
<input type="checkbox">
<div class="fake-checkbox"></div>
</label>
JS
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
} else {
$(this).addClass('checked-state');
}
});
}(jQuery));
Now, I also want to make the input checkbox in its checked state at the same time when the class is added and in its unchecked state when the class is removed.
I know this can be done with element.checked = true but not in jQuery.
How can I achive this?
EDIT
This is surely different and not a duplicate of this question cause we're in a different case, although there's a similarity about 'ticking a checkbox using jQuery' but still not a possible duplicate.
Thanks.

Besides the jQuery answers, i would like to suggest (for this specific case) a CSS only solution, since the checkbox and the .fake-checkbox are siblings.
CSS
.fake-checkbox { /* ... */ }
:checked + .fake-checkbox{ /* ... */ }
HTML
<label>
<input type="checkbox">
<div class="fake-checkbox"></div>
</label>
Demo
.fake-checkbox { color:#ccc; }
:checked + .fake-checkbox{ color:green; }
<label>
<input type="checkbox">
<div class="fake-checkbox">fake</div>
</label>
As for a jQuery answer i would suggest you monitor the state of the actual checkbox instead of manually testing the states.
$('label :checkbox').on('change', function(){
$(this)
.siblings('.fake-checkbox')
.toggleClass('checked-state', this.checked);
})
Demo
$('label :checkbox').on('change', function(){
$(this)
.siblings('.fake-checkbox')
.toggleClass('checked-state', this.checked);
})
.fake-checkbox { color:#ccc; }
.fake-checkbox.checked-state { color:green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox">
<div class="fake-checkbox">fake</div>
</label>

As the checkbox is immediate preceding sibling, you can use .prev() then set the property using .prop() method
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
$(this).prev(':checkbox').prop('checked', false);
} else {
$(this).addClass('checked-state');
$(this).prev(':checkbox').prop('checked', true);
}
});
}(jQuery));
Above code can be simplified as
(function($) {
$('.fake-checkbox').click(function() {
$(this).toggleClass('checked-state');
$(this).prev(':checkbox').prop('checked', $(this).hasClass('checked-state'));
});
}(jQuery));

Try this
$('#yourCheckboxSelector').prop('checked', true);

You can check a checkbox using JQuery.
Using the prop method.
https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/
Use this
HTML
<label>
<input id="real-checkbox" type="checkbox">
<div class="fake-checkbox"></div>
</label>
JS
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
$( "#real-checkbox" ).prop( "checked", false );
} else {
$(this).addClass('checked-state');
$( "#real-checkbox" ).prop( "checked", true );
}
});
}(jQuery));

Change class group of buttons

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.

Inside an id div find all the checkbox and check and hide other unchecked

i am trying to learn and create a jquery which $("#answer") and find all the checkbox inside and check. As an example if checkbox inside #a1 is checked other div (a2,a3,a4) is hidden or other message come out. if i uncheck the #a1 all the div will come out again.
Please enlighten me on the code.
<div id="answer">
<div id="a1">A.<input type="checkbox" name="a1" onclick="cbox()" ></input></div>
<div id="a2">B. <input type="checkbox" name="a2"onclick="cbox()"></input></div>
<div id="a3">C. <input type="checkbox" name="a3"onclick="cbox()"></input></div>
<div id="a4">D. <input type="checkbox" name="a4"onclick="cbox()"></input></div>
</div>
function cbox() {
if (this checkbox is checked) {
target other div inside (#answer) and add .hide()
}
}
2)Is there anyway to add a trigger where i don't need to use onlick="cbox" ?
tq

It's better to use .click() instead of inline javascript onclick.
However, you should use .change() event for input elements instead of click:
$('input[type="checkbox"]').change(function() {
$(this).parent().siblings('div').toggle(!this.checked);
});
Fiddle Demo

Use .change() event instead of .click(). Try this:
$('input[type="checkbox"]').change(function() {
$(this).parent('div').siblings('div').toggle(!this.checked);
});
DEMO

Try this:
$("#answer input").change(function () {
if ($(this).is(":checked")) {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "none");
})
} else {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "block");
})
}
});
DEMO

How to show the child div on mouse hover of parent div

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?

If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo

Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});

You can use css for this,
.parent_div:hover .hotqcontent {display:block;}

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();

$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE

you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});

you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});

How to make a toggle initially loaded as hidden without JS recognize it as invisible?

Ideally, I want to have 2 toggler. When click the fieldset toggler, the fieldset shows up with a div inside being hidden. When an event happened or When click the div toggler, the div show up.
I can only manage one of the 2 toggler working.
This is the html
click here
<fieldset class="fieldset" style="display:none">
<input>//first inputs
<input> 2nd input
<input id="edit-text" name="custom-text" type="checkbox value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>
This is the toggler for the fieldset:
$("a.fieldset-toggle-trigger").click(function() {
$(".fieldset").toggle();
}
The div toggler is inside another groups of code:
var e_fields = $("div#wrapper");
//fadein/fadeout with an event:
function bindEditTextClick(){
$("input#edit-text").click( function() {
if ($(this).attr('checked')) {
e_fields.fadeIn(750);
} else {
e_fields.fadeOut(750, function() {
});
}
});
}
//toggle as a part of another live click fuunction:
if (e_fields.is(':visible')) {
e_fields.fadeOut(500);
}
If I let the fieldset initially loaded as visible, the inside toggle works fine. This inside toggle is connected to other events, not easy to modify. How can I modify the fieldset toggler to allow inside toggle continue working?

If I get you correct you want to toggle main section and then toggle inner section depends on checkbox state. Is so, code and working solutions are below:
html
click here
<fieldset class="fieldset">
<input /><br />
<input /><br />
<input id="edit-text" name="custom-text" type="checkbox" value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>
css
fieldset { display:none; }
#wrapper { display:none; }
js
$(function() {
$(".fieldset-toogler-trigger").click(function() {
$(".fieldset").toggle();
});
$("#edit-text").change(function() {
var action = 'fadeOut';
if ($(this).is(':checked')) {
action = 'fadeIn';
}
$('#wrapper')[action](750);
});
});
jsfiddle
http://jsfiddle.net/y7PKk/

Got the solution for toggle the entire fieldset without messing up the inside toggle:
Initially move away the fieldset instead of hide the fieldset:
.moveaway{
position:absolute;left:-999em;
}
Then, use the fieldset toggler to toggle the moveaway class on/off.