We Keep Coding

Count number of selected elements in jQuery

How would I count the number of elements with the attribute of "selected" if the selected attribute is added dynamically on click?
Here is how I'm adding the "selected" attribute:
var $li = $('.swrt_checkbox_button');
$li.on('click', function(){
var $el = $(this);
$el.toggleClass('checkbox-selected');
$el.attr('selected', function(index, attr){
return attr == "selected" ? null : "selected";
});
});
So, what I want to achieve is, if all my elements have the selected attr, then I want to do something, in this case, disable another UI element.
The problem I'm having is this, if I check to see if the attr is selected within the click it works:
if($el.is("[selected]")) {
console.log('yes');
}
This logs inside the click function but not outside it. So how can I say:
If all elements have "selected" attr { do stuff }?
Obviously I can't do it within the click because the $el is pointing to "this".
Any help or advice you can offer would be much appreciated.
Thanks

Since $li refers to the entire list, just compare how many have the selected attribute:
var totalElems = $li.length;
var selectedElems = $('.swrt_checkbox_button[selected]').length;
if (totalElems == selectedElems) {
//All selected
}
You can stick this at the end of your click event, so it'll run each time.

You could add a little line at the ewnd of your click, after activating a selection. Just check if there are any unselected elements left, if not, then run whatever you need.
// Check if there are any unselected left.
if(!$('.swrt_checkbox_button:not([selected])').length){
// Do the all-are-selected thing
}
Here's a quick implementation:
$('li').click(function(e){
e.preventDefault();
$(this).toggleClass('selected');
if(!$('li:not(.selected)').length) alert('all are selected')
})
li {
display: block; widht: 100px; height: 100px;l
}
li.selected { background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
I would like to not that selected is not a prop that should be used on li elements. Just use a class here.

This is how I would do it:
$("#sel").click(function () {
$("input:not(:checked)").first().prop("checked", "checked");
if ($("input[type='checkbox']").length == $("input[type='checkbox']:checked").length) {
alert("All selected :)");
}
});
Here is the JSFiddle demo

Thanks to everyone who commented. Here is what I did to make it work using tymeJV's solution:
function addCheck() {
var $li = $('.swrt_checkbox_button');
$li.on('click', function(){
var $el = $(this);
$el.toggleClass('checkbox-selected');
$el.attr('selected', function(index, attr){
return attr == "selected" ? null : "selected";
});
var totalElems = $li.length;
var selectedElems = $('.swrt_checkbox_button[selected]').length;
if (totalElems == selectedElems) {
$('.checkboxes-btn').removeAttr("disabled");
} else {
$('.checkboxes-btn').attr("disabled", "disabled");
}
});
}
addCheck();
Probably could be cleaner but it works so thanks!

How to keep active class when changing pages

I am trying to add an active class to nav item, depending what page your on. I am using this script:
<script type="text/javascript">
$(document).ready(function () {
$("#side-bar a").click(function () {
var id = $(this);
$(id).siblings().find(".active").removeClass("active");
$(id).addClass("active");
localStorage.setItem("selectedolditem", id);
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem !== null) {
$(selectedolditem).siblings().find(".active").removeClass("active");
$(selectedolditem).addClass("active");
}
});
</script>
See full jsfiddle here: https://jsfiddle.net/ebo7hLo9/
It adds the active class, but it loads a new page, it disappears. What am I doing wrong?

https://jsfiddle.net/ebo7hLo9/10/ - here's a fiddle!
$(document).ready(function () {
$("#side-bar a").click(function () {
var id = $(this);
$(".active").removeClass("active");
$(id).addClass("active");
localStorage.setItem("selectedolditem", $(id).text());
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem !== null) {
$("a:contains('" + selectedolditem + "')").addClass("active");
}
});
Your code was having issues remembering what element to grab. I think it's due to the web storage API's unfamiliarity with objects. Instead I got the text from the element that was selected, stored it in localStorage and on page load matched it with the correct element. Also there was part of your code that was dealing with finding the class "active" within the siblings() of the selected element and removing it. That complex of code is largely unnecessary. I replaced it with the class selector $(".active")
I didn't change this in the code, but I'd advise against using localStorage in favor of sessionStorage so that the storage will clear itself on tab/browser close.
For more info take a look at this previous stackoverflow post: Storing Objects in HTML5 localStorage

Here is a possible solution: https://jsfiddle.net/6yyLpma1/
$("#side-bar a").click(function () {
var id = $(this);
$('#side-bar').find(".active").removeClass("active");
$(id).addClass("active");
localStorage.setItem("selectedolditem", id);
});
Instead of $(id).siblings() use $('#side-bar'). Use the same logic in other location.

Using data elements and a delegate function: https://jsfiddle.net/ebo7hLo9/12/
HTML
<span id="delegateAnchor">
<div id="side-bar">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Services</li>
<li>What to expect</li>
<li>Representative clients</li>
<li>Success stories</li>
<li>Current litigation</li>
<li>What if you could not be a doctor?</li>
</ul>
</div>
</span>
Javascript
$(document).ready(function () {
$('#delegateAnchor').on('click', '#side-bar a', function() {
var $this = $(this);
var linkId = $this.data('desc');
$this.closest('ul').find('a').removeClass("active");
$this.addClass("active");
localStorage.setItem("menuSelection", linkId);
});
var selectedLinkId = localStorage.getItem("menuSelection");
if (selectedLinkId !== null) {
$('#side-bar a[data-desc="'+ selectedLinkId +'"]').trigger("click");
}
});

Trying to change an image on click and back again

I am trying to toggle an image when a class is clicked. So far I have this (below) and it works to change my 'plus.png' to my 'minus.png' but I need it to change back to my 'plus.png' if the class is clicked again.
I have the following jQuery:
<script type="text/javascript">
$(document).ready(function () {
$('label.tree-toggler, .yellow').click(function () {
$(this).parent().children('.yellow').attr('src', 'img/minus.png');
});
});
</script>
HTML
<li><label class="tree-toggler nav-header">Saftey and Emissions</label><img class="yellow" src="img/plus.png"><hr></hr>
<ul class="nav nav-list tree">
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
</ul>
</li>
Is someone could help me out by adding to what I have, it would greatly be appreciated!

You can add/remove a class to keep track of which image src you are using. Something like this:
$('label.tree-toggler, .yellow').click(function () {
if ( $(this).parent().children('.yellow').hasClass('minus') ) {
$(this).parent().children('.yellow').attr('src', 'img/plus.png').removeClass('minus');
} else {
$(this).parent().children('.yellow').attr('src', 'img/minus.png').addClass('minus');
}
});
You could also use a data attribute and do something similar:
$('label.tree-toggler, .yellow').click(function () {
if ( $(this).parent().children('.yellow').data('current_src') == 'minus') {
$(this).parent().children('.yellow').attr('src', 'img/plus.png').data('current_src', 'plus');
} else {
$(this).parent().children('.yellow').attr('src', 'img/minus.png').data('current_src', 'minus');
}
});
Using the data attribute would require initially setting data-current_src='minus' on the element.

the way i will do it is...
$(document).ready(
function() {
$(".className").click(
var imgPath = $("img").attr('src');
if(imgPath === "+.png") { // check against current path
// change the path to -
} else {
// change the path to +
}
); } );
i didn't test it, but that's the idea

I would recommend adding another class like .active or .shown through JQuery when you switch the image around. That way you could check the current state of the object you're querying.
The Jquery would probably look something like
$('label.tree-toggler, .yellow').click(function () {
// If the active class is NOT applied
if( !( $(this).parent().children('.yellow').hasClass('active') ) ) {
// Apply it and change the image
$(this).parent().children('.yellow').addClass('active').attr('src','img/minus.png');
}
else
$(this).parent().children('.yellow').removeClass('active').attr('src', 'img/plus.png');
});
What's happening here is the active class is being used to determine the state of the image displayed. When you click it, you'll change the image and apply the flag.
After every click the flag is checked and behaves accordingly. Hope that helps! I'm still new to S.O. =.="

If you want to do it in JS, I suggest you to put :
your initial image in src
your alternative image in data-alternative
Like this :
<li>
<label class="tree-toggler nav-header">Saftey and Emissions</label>
<img class="yellow" src="img/plus.png" data-alternative="img/minus.png"><hr></hr>
<ul class="nav nav-list tree">
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
<li>link<img class="yellow" src="img/chevron-right.png"><hr></hr></li>
</ul>
</li>
And the JS :
<script type="text/javascript">
$(document).ready(function () {
$('label.tree-toggler, .yellow').click(function () {
var yellow = $(this).parent().children('.yellow').first();
var alternative = yellow.data('alternative');
yellow.data('alternative', yellow.attr('src'))
.attr('src', alternative );
});
});
</script>

Did you see the toggle function of Jquery?
http://api.jquery.com/toggle/

Function gets called twice for each click

The $(".actionsAdListnTo").click function is getting fired twice.
I tried various solutions posted in StackOverflow but nothing worked.
What is the reason of twice firing any pointers please.
How to avoid this?
$(".actionsAdListnTo").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var selectedListinsCount = selected_Listings.length;
var SelectedMlsnums = selected_Listings.join();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
//*********** To Cart Functionality
if (ddlselectedVal == 'Tocart') {
if (selectedListinsCount > 500) {
if ($('#errmesg').length == 0) {
$('.messageCenter').append('<span id="errmesg" class ="errmesg"> <span class="messageIcon"></span><span>The maximum number of listings you may select To Add to cart is 500.</span></span>');
return false;
}
} else {
$.post(urlstring,
function (data) {
$(window.open(urlstring, '_blank', 'width=750, height=400')).load(function (e) {
var $formCopy = $("#frmPostToEmailReports").clone();
$($formCopy).append('<input id="SelectedMlsnums" name="SelectedMlsnums" type="hidden" value="' + SelectedMlsnums + '">');
// Here "this" will be the popup window. insert a form element into the popup window.
$(this.document).find("#divfrmInfo").html($formCopy);
e.preventDefault();
});
});
}
}
}
});
HTML :
<div class="actionsAdListnTo">
<span> Add Listing To</span>
<ul id="actionsAdListnTo" class="ddlAddListinTo" style="display: block;">
<li id="Tocart">To CART</li>
<li id="Toportal">To Portal</li>
<li id="SaveListings">Save Listing</li>
</ul>
</div>

The click on li bubbles to its parents, one of them being <div class="actionsAdListnTo">, so the parent's click handler is also called. Try to stop propagation of the click on li:
$(".ddlAddListinTo li").click(function (e) {
e.stopPropagation();
...

In this case it looks it would be more correct to target the link only for the toggle and not the outer div. Be as specific with your selectors as possibe, similar to this:
$(".actionsAdListnTo a#select").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
If you want to be more specific without an id using the structure, you could do it simlar to:
$(".actionsAdListnTo > span:first > a").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
Anyway, the way your HTML is structured there is no need to have the toggle triggered by the div as only the link should react to it.
DEMO - Getting more specific with the selector

What I see here is that you are defining two events in the same place, the second one on a child.
$(".actionsAdListnTo").click( function(e){
...
});
$(".ddlAddListinTo li").click(function () {
...
})
Maybe you can use e.sTopPropagation() in the second one, or e.preventDefault()

How to assign a variable using onclick of html?

I am writing a code where the onclick of html should cause a javascript variable to be assigned a value which causes a function to trigger.
<script type="text/javascript">
function set_str(numb)
{
if(numb == 1)
var str_in_func = 'a.tab_1';
else if(numb == 2)
var str_in_func = 'a.tab_2';
return str_in_func;
}
jQuery(window).bind("load", function() {
str = set_str(num);
// When a link is clicked
$(str).click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
I want the javascript variable str to have a value of 'a.tab_1' when the link below is clicked
Topics
This doesn't seem to work though. The above jQuery function doesn't run at all.

There is a much easier approach to this that doesn't require all the mucking about with HTML attributes:
HTML:
<nav>
tab 1
tab 2
</nav>
<div id="content">
<section>Content 1</section>
<section>Content 2</section>
</div>
JS
$(document).ready(function() {
$('.tab').on('click', function() {
$('.active').removeClass('active');
$(this).addClass("active");
$('#content section')
.slideUp()
.eq($(this).index()).slideDown()
;
});
});
See demonstration here.

Topics
The problem is the var before your variable's name. Remove it and you will be fine. var tells javascript that you are declaring a variable for the local scope, not the context of the window, making it unavailable outside of the current context.
You want:
Topics