Count number of selected elements in jQuery

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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!