Update CSS onDomReady for nested checkboxes - javascript

I have some nested checkboxes that are loading correct data from the database, however I would like to put a line through the text label for the ones that are checked. It's working fine for the second level checkboxes, but I haven't been able to make the first level checkboxes work fine.
You can see the bug here:
http://jsfiddle.net/Zfv7h/3/
$(document).ready(function() {
$(".content-finalized").each(function() {
if ($(this).attr("checked")) {
$(this).closest("li").css("text-decoration", "line-through");
}
});
$(".subchapter-finalized").each(function() {
if ($(this).attr("checked")) {
$(this).closest("li").css("text-decoration", "line-through");
}
});
});
Thanks for your help.

UPDATED ANSWER
Change your Javascript to this
$(document).ready(function () {
$("input.content-finalized:checkbox:checked").next('span').css("text-decoration", "line-through");
$("input.subchapter-finalized:checkbox:checked").parent().css("text-decoration", "line-through");
});
I had to slightly change your html markup. All I did was wrap the Chapter in a .
Here's why. When I applied the css line-though to the parent <li>, it also applied it to it's children even though I specified the text-decoration to none for unchecked elements. So, now instead of applying it to the parent <li>, I'm applying it to the <span> instead.
Here's an updated fiddle

Related

click then unclick jquery button not working

I'm trying to make a button which on one click it changes it's color, and on another click it returns to it's original form.
something like clicked and unclicked.
I added a JSfiddle for you to look at it.
https://jsfiddle.net/dw5y5xLx/3/
$('.genM').click(function() {
$('.genM').removeClass('selected');
$(this).addClass('selected');
});
thanks!
also, is there a way doing that by only using CSS HTML?
Thanks.
$('.genM').click(function() {
$(this).toggleClass('selected');
});
I have updated the js fiddle for you, please check (https://jsfiddle.net/dw5y5xLx/15/)!
jQuery hasClass function can be helpful
$('.genM').click(function() {
if($(this).hasClass('selected')){
$(this).removeClass('selected');
}else{
$(this).addClass('selected');
}
});
IDEA:
Is there a way doing that by only using CSS HTML?
Yes, there is a way how u could achieve that just by pure CSS and HTML. But, if you dont want to use js, you must have an HTML element that is able to keep the "pressed" or "unpressed" state all by itself, without js.
However, there is no such an HTML element, so you have to use something simmilar: Checkbox
<input type="checkbox"> have "checked" and "unchecked" state and it is practicaly the same as "pressed" or "unpressed".
SOLUTION:
The trick is to stylize the ckeckbox with CSS so it visually appears as a pressed or unpressed button. Here is an example how checkbox can be stylised - you need to modify the CSS in order to appear it like a button, not a toggle switch!
You will want to use CSS selectors like this (as shown in example):
input[type="checkbox"]:checked { ... },
input[type="checkbox"]:checked + .slider { ... },

Change status on click jquery

Trying to change the status of font-awesome when checkbox is checked heart should change to red. Can't find the right thing to make it work.
can I click the heart and hide the checkbox? I know its something :before in the css but not entirely sure.
http://jsfiddle.net/xd8LbtLz/
$('.addToFav').click(function(){
if($(this).prop('checked')){
console.log('change heart to red');
} else {
console.log('do nothing atm');
}
})
Firstly, your fiddle did not include jQuery. Secondly, there's no point using prop to access a property of an element in a jQuery object when you can directly access the element itself. Lastly, you can use toggleClass() to add or remove a CSS class to change the colour of the hearts. Try this:
$('.addToFav').click(function () {
$('.fa-heart').toggleClass('red', this.checked);
})
Example fiddle
You can use,
$('.addToFav').click(function() {
if ($(this).prop('checked')) {
$(this).prev().find("i").css("color", "red");
} else {
$(this).prev().find("i").css("color", "black");
}
})
Fiddle
Few points
1) Your fiddle did not had jquery library included. which you need to include for using jq syntax.
2) Using change event is more appropriate in case of checkbox than click event.
3) use current checked property to set color to icon .fa-heart
$('.addToFav').change(function(){
$(this).prev().css('color',this.checked ? "red":"black");
});
Working Demo

JQuery Table Toggle Row issue

I have table which is being dynamically created.
I would like to try not to have any more attributes in the table (like an ID field).
It is a multilevel table where all the TableRows should be expandable and collapse on click in any of the TD in each row.
$('.fylke_click').click(function () {
$(this).parent().nextUntil('.fylke').slideToggle(0);
$('.sted').hide();
});
$('.kom_click').click(function () {
$(this).parent().nextUntil('.kommune').slideToggle(0);
});
See this simplified fiddle:
http://jsfiddle.net/T2Lwn/
So it's basically 3 levels and it is a lot of problems here.
One obvious one is when you are on the second level, which is called "kommune" and if you click on the last TR it removes the "fylke" underneath. As you can see if you click on "MIDTRE GAULDAL"
This is probably because I use .Parent() and I need some sort of if check if I am on the last row?
Is it also other problems with this code? Can I specify the click method class="fylke_click" and class="kom_click" on a more general level?
For example for all <tr class="fylke"> each TD class will have class="fylke_click" and same for kommunne?
If I understand your issue correctly this may help:
Demo Fiddle:
Since you said you're going to be dynamically creating this content, I would recommend delegating off of the main table instead of making a click handler for each row. Also, since all of the stuff you want to show / hide are siblings and not nested, things get a bit tricky. You'll need to be specific with your .nextUntil() by passing a filter, and I found a :not() on the filter was necessary.
Again, since these are all siblings, it's not as easy as hiding the children of the header row, so I set up an "open" class to check if the header was open or not, and hid / showed stuff depending on if it was already open.
JS:
$('.kommune').hide();
$('.sted').hide();
$('.table').on('click', 'tr', function(){
$this = $(this);
if( $this.hasClass('fylke') ){
if ( $this.hasClass('open') ) {
$this.toggleClass('open').nextUntil('.fylke', 'tr').hide();
}
else {
$this.toggleClass('open').nextUntil('.fylke', 'tr:not(.sted)').toggle();
}
}
else if ( $this.hasClass('kommune') ){
$this.nextUntil('.kommune', 'tr:not(.fylke)').toggle();
}
});

jQuery custom menu - adding and removing classes onClick

If someone can think of a better title for this question, please feel free to alter it. This is the issue: in a navigation menu, clicking an item should mark it red (default is orange). Both orange and red styles (class names bmark and bmark_active respectively) were generated using the CSS Button Generator application. This is the jQuery code which should do the job:
$(function () {
$('.bmark').click(function(){
$('.bmark_active').addClass('bmark');
$('.bmark_active').removeClass('bmark_active');
$(this).addClass('bmark_active');
$(this).removeClass('bmark');
});
})
It works fine for all buttons, except the default one ('All' in the fiddle example). So if you click 'Russia', for example, the red focus will move onto that button (by removing orange class and adding red class), but then when you click 'All' again, it doesn't switch to red. Why is that and how do I fix it?
JS Fiddle
You're not applying the click() event to the parent element, only applying it to the child elements:
$(function () {
$('.bmark, .bmark_active').click(function(){
$('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
$(this).addClass('bmark_active').removeClass('bmark');
});
})
jsFiddle here.
Updated your fiddle do it that way. More simplified. The other answers here work fine but this is the least verbose way of handling it.
$(function () {
$('.bmark').click(function(){
$('.bmark').removeClass('active');
$(this).addClass('active');
});
})
http://jsfiddle.net/chazelton/52esG/2/
You're not binding on the '.bmark_active' element.
You can do this :
$(function () {
$(document).on('click', '.bmark_active,.bmark', function() {
$('.bmark_active').addClass('bmark').removeClass('bmark_active');
$(this).removeClass('bmark').addClass('bmark_active');
});
})
Demonstration
But most often I'd prefer to give the same class to all elements, and to only add or remove a class on the active elements, so that the event handling code would be
$('.bmark').removeClass('active');
$(this).addClass('active');
It also lets the CSS be cleaner as your two classes are, for now, mostly identical and it's better to have just the few changes between the two modes isolated in the 'active' class.

Dynamically check / uncheck checkboxes in a tree

I have a similar question to Uncheck parent node if all children unchecked in JQuery (with this solution) and have tried to modify it so that the children will also all uncheck if the parent is unchecked (which the above/below fails to do).
JSFiddle for the above (http://jsfiddle.net/fRxVs/)
jQuery.each(jQuery('#treeList ul li').find(':checkbox'), function(){
jQuery(this).change(function (){
if (jQuery(this).is(':checked')) {
jQuery(this).parentsUntil('#treeList').siblings().filter('input:checkbox').attr('checked', true).trigger('change');
}else{
jQuery(this).parents('ul:first').siblings('input:checkbox').prop('checked', $(this).parent().siblings().children('input:checked').length).trigger('change');
}
});
});
Though I'm not sure why, but I had to change prop from the last line to attr in order for it to correctly work as JSFiddle locally for some reason...
Basically I have a 3 level setup:
Grand-Parent
- Parent
-- Child
If the grandparent is checked/unchecked, then its children and grandchildren should all be checked/unchecked too.
If the parent is checked/unchecked, its children should be checked/unchecked as well as its parent.
If the children are checked, then its parent and grandparent should be checked (if no children are checked then parent shouldn't be checked).
I'm trying to change this to Continent, Country, Region - I think you will understand if I were to just say this....
Thanks
Here's the solution: Fiddle: http://jsfiddle.net/fRxVs/55/
$('#treeList :checkbox').change(function (){
$(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
if (this.checked) {
$(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);
} else {
$(this).parentsUntil('#treeList', 'ul').each(function(){
var $this = $(this);
var childSelected = $this.find(':checkbox:checked').length;
if (!childSelected) {
$this.prev(':checkbox').prop('checked', false);
}
});
}
});
Modifications and explanations
$ is exactely the same as jQuery. Be consistent when using it: jQuery should only be used when you're not sure whether $ === jQuery (is $ overwritten?).
:checkbox is a selector which matches every input[type="checkbox"]. It's obsolete to specify input:checbkox, since a checkbox element is always an input element.
.find(..) seeks for any element which is a child (not necessery the direct child) of the matched selector. "#treeList :checkbox" is faster, and has the equivalent result as $('#treeList').find(':checkbox').
When a property/method/event is added to a jQuery object, all elements which match the selector will be modified. Therefore, you don't have to loop through each element individually: jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)}) can be shortened to jQuery('#treeList :checkbox').change(...).
You don't have to trigger change after changing a checkbox check state, because the function already takes care of the full tree.
Old question but you could just do it like this:
$('input[type=checkbox]').change(function(){
$(this).next().find('input[type=checkbox]').prop('checked', this.checked);
$(this).parents('ul').prev('input[type=checkbox]').prop('checked', function(){
return $(this).next().find(':checked').length;
});
});
Fiddle: http://jsfiddle.net/ojc1qg1f/

Categories

Resources