I have a list item with a radio button input in each, on click of the list item the input is checked. However, if clicked again I want to remove the class and deselect the option. I can't seem to get anything to work however.
function setupToptions() {
if ($('ul.top-options input').length) {
$('ul.top-options li').each(function(){
$(this).removeClass('active');
});
$('ul.top-options li input:checked').each(function(){
$(this).parent('li').addClass('active');
});
};
};
http://jsfiddle.net/BKgdc/4/
What is wrong?
$('ul.top-options li input[type=radio]').click(function() {
if(!$(this).closest('li').hasClass('active')){
$('ul.top-options li').removeClass('active');
$(this).closest('li').addClass('active');
}else
$(this).removeAttr('checked').closest('li').removeClass('active');
});
http://jsfiddle.net/BKgdc/8/
You need to have an event handler :
$('ul.top-options input').change(function(){
if ($('ul.top-options input').length) {
$('ul.top-options li').each(function(){
$(this).removeClass('active');
});
$('ul.top-options li input:checked').each(function(){
$(this).parent('li').addClass('active');
});
}
});
but your code can be simplified as
$('ul.top-options input').change(function(){
$('ul.top-options li').removeClass('active');
$('ul.top-options li input:checked').parent('li').addClass('active');
});
See demonstration
$(document).ready(function() {
$li = $('ul.top-options li');
$li.click(function() {
if(!$(this).hasClass('active')){
$li.removeClass('active')
.filter(this).addClass('active').find('input').prop('checked', true);
} else {
$(this).removeClass('active');
$(this).find('input').prop('checked', false);
}
});
$li.filter(':has(:checked)').click();
});
Your solution would be to use checkboxes instead of radio buttons. No need for any javascript when using checkboxes.
If you want to deselect a radio button you should remove it's selected attribute. :checked only applies on checkboxes.
You would likely need to do this:
$li = $('ul.top-options li');
$li.click(function () {
var self = $(this);
$li.not(self).removeClass('active');
(self.hasClass('active') ? (self.removeClass('active').find('input').prop('checked', false)) : (self.addClass('active').find('input').prop('checked', true)));
});
$li.filter(':has(:checked)').click();
alternate conditional form:
$li = $('ul.top-options li');
$li.click(function () {
var self = $(this);
$li.not(self).removeClass('active');
if (self.hasClass('active')) {
self.removeClass('active').find('input').prop('checked', false);
} else {
self.addClass('active').find('input').prop('checked', true);
}
});
$li.filter(':has(:checked)').click();
a fiddle to show in action: http://jsfiddle.net/ZK4th/
Related
If you go to the JSFiddle, and click "About" and then "Contact" in rapid succession, the drop-down options (which appear to the right of the parents) appear appended to each other although only one parent is selected - this is not desired. I'm trying to only allow a new selection to be made once the appear/disappear animation has been completed, avoiding any appending of the children's content.
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
console.log("A");
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
});
} else {
console.log("B");
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
//$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
});
I tried adding this code after the opening of the function, but it only gave me the alert.
$('#nav .nav-ul li').click(function(){
var $this = $(this);
if(!$this.data('disabled')){
$this.data('disabled', true);
alert('next click enable only in 5 seconds');
setTimeout(function(){
$this.data('disabled', false);
}, 5000);
}
});
I'm trying to transform a fieldset with one legend and one UL of checkboxes/radio as a select html element. I know, it sounds bad and doesn't really make sense, but let's just say I have to do it.
I have a jsfiddle https://jsfiddle.net/demj49st/
The problem is that I have some issues replicating the click behavior of the select element. I don't find the right selector to make it so a click on a checkbox wont make the fake select box disappear.
(function($) {
$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
})
$(document).on('click', function (e) {
if($('ul').hasClass('visible') && !$('fieldset legend').is(e.target)) {
$('ul').removeClass('visible');
$('legend').removeClass('active');
}
});
})
})(jQuery);
$(document).ready(function() {
$('fieldset legend').on('click', function() {
var $this = $(this);
$this.toggleClass('active');
$this.next().toggleClass('visible');
});
$(document).on('click', function (e) {
if (!$("fieldset > ul , fieldset > legend").is(e.target) // if the target of the click isn't the container...
&& $("fieldset > ul , fieldset > legend").has(e.target).length === 0) // ... nor a descendant of the container
{
$('fieldset > ul').removeClass('visible');
}
});
});
DEMO
Ok, I have totally retooled my approach (thank you superUntitled) and am making progress... I have an unordered list that users can toggle and my only remaining issue is that when I expand some items, and then click "Show All Cities" not all of the arrows go in the same direction. All the arrows change, including the ones on the list items already expanded. Any suggestions on how to resolve this?
Here's my new Javascript:
$("#Names .airports").hide();
$("#Names .close").hide();
$('#Expand').click(function(){
$('h2').children(".close").toggle();
$('h2').children(".arrow-down").toggle();
if($(this).text() == 'Hide All Cities')
{
$(this).text('Show All Cities');
$('#Names .airports').slideUp('fast');
}
else
{
$(this).text('Hide All Cities');
$('#Names .airports').slideDown('fast');
}
});
$("#Names h2").addClass("state").click(function() {
$(this).parent().children(".airports").slideToggle('fast')
$(this).children(".close").toggle();
$(this).children(".arrow-down").toggle();
Here's the fiddle illustrating the remaining problem:
http://jsfiddle.net/d3pxx8ds/127/
Thanks in advance
Here's my old JavaScript (reference only now):
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');});
$('.stateNames ul').hide();
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
}
}
});
});
All i did was replace the order, i moved the .rotate to happen before the .toggle functions this would read the rotate first and subsequently do the toggle function thus setting the variable to 180 instead of waiting for the toggle to start, not allowing the variable to be set
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind : {
click : function() {
value += 180;
$(this).rotate(value)
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
$(function() {
$('li.state').prepend('<img src="http://png-4.findicons.com/files/icons/2227/picol/32/arrow_sans_up_32.png" class="arrow"/>');
});
$('.stateNames ul').hide();
var value = 0
$(".arrow").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate(value)
if (value==180){
value=360;
}
else{
value=180;
}
}
}
});
$('.stateNames li').click(function(e) {
e.stopPropagation();
$(this).find('ul').toggle();
});
I added the if statement and it works for one full go around but on the next toggle the arrow doesn't rotate hope that helps for now i will keep looking in to it
This function is set up so it simply finds the -a's- within the class of menu-option-set, and says, upon click, add the class "selected" and remove the class "selected" from all others within that list.
What I want to do is simply have it so if you click the item that already has the class of "selected" then it removes the class of "selected". I know it shouldn't be "return false;" I just have that as a placeholder because I can't figure out the proper coding.
Thanks guys! :)
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// Remove Class if already selected --> this is the part that I need help with
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
$('.menu-option-set a').click(function()
{
// if clicked item is selected then deselect it
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
// otherwise deselect all and select just this one
else
{
$('.menu-option-set a').removeClass('selected');
$(this).addClass('selected');
}
});
You should just be able to use $().removeClass('selected') i.e.
if ( $this.hasClass('selected') ) {
$this.removeClass('selected');
}
However, you are also adding the class again later so this should not really be necessary.
You could inline this by selecting all the .selected elements, removing this and removing the class.
$this
.parents('.menu-option-set')
.find('.selected')
.not(this)
.removeClass('selected');
$(this).addClass('selected');
Alternatively, use the toggleClass() method as follows:
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').not(this).removeClass('selected');
$this.toggleClass('selected');
});
EDIT: Added the .not(this) to exclude the clicked <li> from having the class removed before it should.
If you want to be concise:
$('.menu-option-set a').click(function() {
$(this).toggleClass('selected').siblings().removeClass('selected');
});
My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?
Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/
$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link
Handle the click event of the <li> instead of the <ul>.
You can then get this.id.
Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle
here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});
You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});