Check checkbox = Toggle class in div (with many same divs) - javascript

I have a list of divs (#div1, #div2, #div3 etc). Each one of those divs contain different pictures and texture. The divs share the same layout class and they all contain a checkbox (all checkboxes also have one class).
I want the individual div to toggle class when the checkbox inside it are checked.
How to manage this without all divs toggle class when click a checkbox in one div?
Thanks.

http://jsbin.com/exasow/1/edit
$(':checkbox').click(function(){
$(this).closest('div[id^=div]').toggleClass( 'superclass' );
});
you can use both click or change function.
http://api.jquery.com/closest/ will allow you to have your checkbox inside other elements, it will always search up the DOM tree for the desired parent:
div[id^=div] means DIV element which ID starts with the word "div" and will work for all your div1, div2, div*** selectors.

Try this. DEMO.
Use the .click() for the checkbox and then get its parent div by using .parent() then call .toggleClass('classforparentdiv').
UPDATE
Here.
Hope it helps.

Give a Id to the checkboxes and on basis of that toggle the parent div class
or, listen to the event and toggle the class of the parent div
Something like this,
$(event.currentTarget).parent().toggle('className');

Related

Toggle show/hide (jQuery)

There are many posts on this topic already but none that address my issue directly. Here is my current setup:
I have a div with the ID #ptwesv;
and another div containing the content I want to show hide with the ID #ptwest.
The jQuery I'm using is this:
<script>
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").show();
});
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").hide();
});
</script>
This is hiding the #ptwest container correctly on click, but then doesn't show the conatiner when I click the trigger element (#ptwesv) again. I presume this is because once the element has been hidden, clicking on the trigger again is causing the actions to work against each other.
I'm using this W3 exmaple as a reference, the only salient different I notice is that there are different trigger elements for show/hide.
Is it possible to trigger show/hide of an element from the a single div and how can I get this to work?
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
is the way you want. It toggles the element. So if it is shown it hides and the other way around.
At the moment the element will always hide, because of twice the same click element.
Because Id is unique for whole document. try with toggle()
jQuery("#ptwesv").click(function(){
jQuery("#ptwest").toggle();
});
The toggle() method toggles between hide() and show() for the selected elements.
This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
$("#ptwesv").click(function(){
$("#ptwest").toggle();
});

Hide the element within the div

I'm duplicating the div #Play_Start. I have a event within div On select of Play from Dropdown it hides the Green div with Play text.
It works fine on first div. But doesn't work on duplicated div.
I want to hide the green div on selection of dropdown Play option from particular div.
E.g : from div one dropdown selected play option it should hide the green div of only that div not other.
and same with other divs. It should hide the green div on selection of dropdown option from same div.
My fiddle here : http://jsfiddle.net/kgm50e43/2/
at the moment it only works for first div and not for other duplicated divs.
There are multiple problems on your code,
You are duplicating the id's. Id should be unique. You need to replace it with class names.
You don't need to write inline function calls from elements. you can use jQuery to bind events to the elements.
Since you are creating the elements dynamically, you need to use delegates for binding the elements.
Then you can use like this,
$(document).on("change", ".Inputs-Control", function () {
$(this).closest(".Play_Start").find('.IconTest').hide();
});
Fiddle
Don't use IDs when duplicating elements. You should only have 1 ID (unique). You should use classes.
I think this is what you are looking for. I'm not going to be writing your code for you - but you should be able to figure it out using this.
$('.input-control').on('change', function(){
var val = $(this).val();
if(val === "0"){
$(this).parent().find('.hide-me').hide();
}
});

how to remove class of a div without knowning id of div?

Hi i have a dynamic generated div's list with unique id's for every generated div's,
when click on one of the dynamic generated div this will change the selected div background color by this code $(this).addClass('add_color'); if again i click on another one div then the older selected div background color should change to default so i tried this code $(".add_color").removeClass(".add_color"); but it's not working, please help.
$(".className").removeClass("className")
You need to modify the click handler to add/remove class on click of divs:
$('body').on('click','.somedivs',function(){
$(".add_color").not($(this)).removeClass("add_color");
$(this).addClass('add_color');
});
if you just need to remove the class for any div containing that particular class
$("div").removeClass('someClass');
$(".your_class").removeClass("your_class");

jQuery selecting all divs of a kind and attaching event

$('#tags').each(function(i,element){
$(this).on('click',function(){
$('.otherdiv').toggle();
});
How can i attach the click handler to ALL divs with the id of tags? for some reason this is only targetting the first one
There is no need for the each, just do:
$('.tags').on('click',function(){
$('.otherdiv').toggle();
});
and apply a class of tags to each of the divs, you should not have multiple divs with the same id.
This will then apply the on click bindings to all divs with a tags class.
You should not have more than one ID.
use classes instead.
$(".tags").click(function() {
$('.otherdiv').toggle();
});
attribute the css class to every element you want
IDs are unique. You shouldn't have more than 1 element with any given id.
As noted in other answer, use class instead to select multiple elements.

JQuery expands all divs on page

One div works fine, however when using multiple divs they all get expanded simultaneously.
Here 1x
http://jsfiddle.net/uPzXh/1/
Here 2x
http://jsfiddle.net/uPzXh/
How about:
jQuery(document).ready(function() {
jQuery(".lol").hide();
jQuery(".lollink").click(function() {
jQuery(this).prev().slideToggle(500);
jQuery(this,".new").hide();
});
});
BTW div in a is not allowed according to the spec.
In the second example you have a div with the same class name twice. So this line of code:
jQuery(".lol").slideToggle(500);
is doing what you tell it to do .. open all elements with a class name of lol.
Changing the class of the second div to lol2 would fix this.
I think you need to use $(this) inside the click function rather than $('.lol')
demo
I think what you are looking for is to expand one div when one link is clicked (not expand both, one after the other). If that's right, you can do something like this:
jQuery(".lollink").click(function() {
jQuery(this).hide().parent().find(".lol").slideToggle(500);
});
This hides the clicked element, gets the parent element, finds the descendant of that element with class .lol and toggles the slide on that.
See an updated fiddle here.

Categories