Bind functions events to a checkbox/label on change function - javascript

I am trying to add some functionality to the following component, basically when the user clicks on the parent "li label checkbox" this should check/unchecked the > "ul li label checkboxes", the problem is that I am using the label to trigger show/hide the next "ul" and can't bind another function, the ideal escenario will be as follow:
click on li label {element} > slidedown the next ul
click on li label {Checkbox} > check/uncheck the next ul checkboxes childs
I created a jsfiddle at this point the html markup cannot be changed :/
$(document).ready(function(){
function dropdown() {
$("#sidebarNav label").not("input[type='checkbox']").on('change', function (e) {
if (jQuery(this).parent().has("ul")) {
e.preventDefault();
}
$(this).next('ul').slideToggle('fast');
$(this).find('i').toggleClass('ion-plus ion-minus');
//console.log(this);
if (jQuery(this).hasClass('has-dropdown')) {
$(this).find('input').prop('checked', true);
//var item = $(this).find('input');
//console.log(item);
}
var checkbox = $(this).find('input').is(":checked");
//console.log(checkbox);
if(checkbox) {
//console.log("checked.");
} else {
//console.log("unchecked.");
}
});
} dropdown();
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});

Try
function dropdown() {
$("#sidebarNav li").has("ul").find(' > label input').on('change', function (e) {
var $ul = $(this).parent().next();
$ul.slideToggle('fast');
$ul.find('input').prop('checked', this.checked);
$(this).prev('i').add($ul.find('i')).toggleClass('ion-plus', this.checked).toggleClass('ion-minus', !this.checked);
});
}
Demo: Fiddle

Related

How to Add and remove attribute if found specific class

I have some list items and if I click any list item it become selected by adding class .selected
If I click outside of the list item all list item become unselected. FIDDLE
I also have one button initially disabled. I wanted to make the button active by removing "disabled" attribute when list items are selected.
Again if I click outside all list item should be unselected and button become disable again.
How I can do this? Any help will be appreciated.
JS
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
}
});
All you're missing is how to enable/disable your button and that is
$('.load-table').prop('disabled',false); // or true to disable
So just plug this in as required
$(".list-group-item").click(function() {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
http://jsfiddle.net/has9L9Lh/22/
Use .hasClass() instead and set else condition and to disable and enable the button use .prop()
$(".list-group-item").click(function(e) {
e.stopPropagation();
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
$('.load-table').prop('disabled',false);
});
$(document).on('click', function (e) {
if ($(e.target).hasClass("list-group")) {
$('.list-group-item').removeClass('selected');
}
else{
$('.list-group-item').removeClass('selected');
$('.load-table').prop('disabled',true);
}
});
Demo
Use attr() property of jquery.
$(".list-group-item").click(function () {
$('.list-group-item').removeClass('selected');
$(this).addClass('selected');
if ($("button").attr("disabled") === "disabled") {
$("button").attr("disabled", false);
}
});
$(document).on('click', function (e) {
if ($(e.target).closest(".list-group-item, .load-table").length === 0) {
$('.list-group-item').removeClass('selected');
$("button").attr("disabled", true);
}
});
Above code should work. When the item is clicked then check if the button is still disabled. If it is then enable the button.
Same goes when the user click outside the list.
Fiddle

dropdown menu , remove class if its open

I'm trying to create dropdown menu, I'm doing it in this way, by default on dropdown menu I'm doing
.dropdown {
display: none;
}
then im creating event on click and based on that context im toggling class
.active { display block; }
now I cant figure out how can I remove that .active class when I click on other button or in document, I don't want to keep dropdown active class if user click on other button demo
http://jsfiddle.net/pnLkpxkb/8/
$(function () {
// The user clicks anywhere in the document
$(document).click(function (e) {
// If a dropdown has a class active AND if the dropdown or the link is not the target of the click
if ($("ul.dropdown").hasClass("active") && !$("ul.dropdown, .btn > a").is(e.target)) {
// Remove class active
$("ul.dropdown.active").removeClass("active");
}
});
var dropdown = $(".btn > a");
// The user clicks on a toggle link (One or Two)
dropdown.on("click", function () {
// Remove the active class from the active element
$("ul.dropdown.active").removeClass("active");
// Add class to the relevant sub menu
$(this).siblings("ul.dropdown").addClass("active");
});
}());
Updated after comment
You don't need to put "" with this keyword. Your code line should be:
$(this).siblings("ul.dropdown").toggleClass("active");
Complete Code
$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown.active").removeClass("active"); //added new line
$(this).siblings("ul.dropdown").toggleClass("active");
});
}());
Updated Code with Remove Class
toggleClass don't work as you want. For your case i suggest to go this way:
$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown").removeClass("active");//add this to remove class from all ul .dropdowns
$(this).siblings("ul.dropdown").addClass("active");//Add class to your ul dropdown. Here you can use toggleClass too
});
}());
fiddle
$(function () {
$(document).on('click', function () {
$("ul.dropdown").removeClass('active');
});
$(".btn a").on("click", function (e) {
e.stopPropagation();
$("ul.dropdown").removeClass('active');
$(this).siblings("ul.dropdown").addClass("active");
});
});
JSFiddle Demo.

jQuery .on() tr click event using .not() on tr checkbox click?

So my title may be confusing, but it has the right details. I have a table with clickable rows. When clicking the row, the row highlights. The table also has a checkbox column. Clicking the checkbox should NOT highlight or remove highlight from the row. How can I properly use .not() or :not in the .on('click', 'tr', function(){ ... }) ? http://jsfiddle.net/vmu0p2oe/
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
});
Add this to the beginning of the handler:
if($(e.target).is('input[type=checkbox]')) {
return;
}
This will stop the handler from running if the element clicked is a checkbox.
Fiddle: http://jsfiddle.net/vmu0p2oe/1/
Add a handler for the checkbox that uses stopPropagation() to prevent the click from bubbling out to the tr:
$('table').on('click', ':checkbox', function(e) {
e.stopPropagation();
});
DEMO
How about this:
$('table').on('click', 'tr', function (e) {
var el = e.target;
if ( el.type !== "checkbox"){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
} else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
}
});
fiddle

Adding and removing click/hover event handlers jQuery

Run into issues mixing click and hover events.
Clicking an inactive li a element toggles an active class and binds a hover event.
Hovering over now active element displays a previously hidden block (span.rate)
Clicking the hovered element is supposed to hide it, remove hover event and toggle the active class on the parent so it is no longer 'active'.
Clicking the hovered event does not remove the events and toggle active. There is some other logic in there regarding mutually exclusive options, this all works fine though.
jsfiddle of how it all sits together:
http://jsfiddle.net/65yY3/15/
Current js:
ps = {
psToggle: 0,
init: function () {
$(document).ready(function () {
$('.example li a)').on('click', function(e) {
e.preventDefault();
var that = $(this);
if (that.parent().hasClass('paired')) {
if (rm.psToggle === 0) {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.psToggle = 1;
} else {
if (that.hasClass('active')) {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.psToggle = 0;
} else {
$('.paired a').toggleClass('active');
that.find('.rate').fadeToggle(50);
//Call message function
}
}
rm.pControl();
} else {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.pControl();
}
});
});
},
pControl: function () {
//Unbind events to all control items excluding 1st item.
$('.example li a').off('hover');
$('.example li a .rate').off('click');
$('.example .active').each(function(i) {
$(this).on('hover', function() {
$(this).find('.rate').fadeToggle(50);
});
});
$('.example li a.active .rate').on('click', function() {
//Remove hover/hide and toggle active state
$(this).off('hover');
$(this).hide();
$(this).parent().toggleClass('active');
rm.pControl(); //rebind new active classes
});
}
};
ps.init();
Check the below demos.
Both the click events were getting fired as ,.rate is the child of a.
$('.example li a.active .rate').on('click'... and
$('.example li a').on('click'...
So you can either remove the click on .rate. Demo1
Or add e.stopPropagation(); to the child to stop event bubbling from parent to child. Demo2
$('.example li a.active .rate').on('click', function(e) {
e.stopPropagation();
//Remove hover/hide and toggle active state
$(this).off('hover');
$(this).hide();
$(this).parent().toggleClass('active');
ps.pControl(); //rebind new active classes
});
enter link description hereCorrect
$('.example li a') instead of $('.example li a)')
update here is the link

Watch elements count by class using jQuery

I have simple HTML:
ul > li > button
And have some JavaScript code:
$('.side-filters .filters_list li').each(function(){
$(this).find('button').click(function(){
var arrList = $('.side-filters .filters_list li .active').map(function(){
return $(this).attr('id');
}).get();
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
If I click on a button, add class 'active' to the button, and if clicked again, remove class.
I need live count elements witn class 'active'. If there is at least one given ul class 'someclass' and if I click again and have no elements with class active, remove 'someclass' from the Ul.
How can I do this?
There is no need to loop through the elements and add a click to every button. Add one listener.
//listen for click on a button
$('.side-filters', "click", ".filters_list li button", function(){
//toggle the active class on the button
var button = $(this).toggleClass("active");
//see if anything is selected
var hasSelection = $('.side-filters .filters_list li .active').length > 0;
//toggle a class on the closest ul based on if anything is selected.
button.closest("ul").toggleClass("someclass", hasSelection);
});
References:
toggleClass(class [, switch])
.closest( selector )
You can add this function ()
function someclass () {
var count = $('.active').length;
if (count >= 1) {
$('ul').addClass('clasHere')
} else {
$('ul').removeClass('clasHere')
}
}

Categories

Resources