0

I am having some difficulties when trying to iterate all checkbox and check if it is checked. Here is the code:

content = "<table class=\"filter-table\">";
content += "<tr><td><input class=\"pssLabel\" type=\"checkbox\" onclick=\"toggleOverlayer('pssLabel')\">Show Label</td></tr>" + 
            "<tr><td><div id=\"pss\"></div></td></tr>";
content += "<tr><td colspan=\"2\" style=\"padding:5px;font-size:15px;color:black;\">Development Type</td></tr>";
content += "<tr><td><input value='Commercial and Residential' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()' >Commercial and Residential</td><td><input value='Commercial' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()' >Commercial</td></tr>";
content += "<tr><td><input value='Heavy Vehicle Park' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Heavy Vehicle Park</td><td><input value='Hospital' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Hospital</td></tr>";
content += "<tr><td><input value='Hotel' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Hotel</td><td><input value='Industrial' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Industrial</td></tr>";
content += "<tr><td><input value='Industrial-White' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Industrial-White</td><td><input value='Office' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Office</td></tr>";

Here is how I iterate all checkbox and perform checking:

function queryPSS() {
var type_filter = new Array();

//Iterate thru all checkbox
$(":checkbox").each(function(index, element) {
    if($(this).is(':checked'))       
    {
        type_filter.push($(this).val());            
    }
});

}

However, is there any way for me to skip the first checkbox (no matter checked or not) and check for other checkbox and store into array.

Thanks in advance.

Improve this question
1
  • Right there in your .each() callback is the index argument which will let you test if it's the first checkbox or not. You could also use a common class name on the checkboxes that you do want to iterate and just query on that class name instead. Commented Mar 26, 2014 at 6:27

5 Answers 5

Reset to default
2

Just add a simple if condition like 

if (index !== 0)

full code:

$("input:checkbox").each(function(index, element) {
    if (index !== 0) { //skip first checkbox
       if($(this).is(':checked')) {
        type_filter.push($(this).val());            
       }
     }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Since you assigned pssLabel class to your first input, you can skip the check box with that class:

$(":checkbox").each(function(index, element) {
    if($(this).hasClass('pssLabel')) return;

    if($(this).is(':checked'))       
    {
        type_filter.push($(this).val());            
    }
});
Improve this answer

1 Comment

Maybe exclude .pssLabel in the selector and not bother with the test?
0

You can use :gt(0)

$(":checkbox:gt(0)").each(function(index, element) {

---> https://api.jquery.com/gt-selector/

Improve this answer

2 Comments

or: ...each(function(index, element) { if (index == 0) return true;...
Sure thanks. This method work as well. Thanks a lot!
0

You can target only the checkboxes with class pssCheckBox as first one don't have it.

function queryPSS() {
    var type_filter = $("input.pssCheckBox:checked").map(function (index, element) {
        return this.value;
    }).get();

}

Also have a look at the use .map()

Improve this answer

Comments

-1

yes use .map() like up floor

var type_filter = $("input[name='instanceCheck']:checkbox:checked").map(function(index, element) {
        return this.value;
}).get();

this callback is sync function each callback is async function

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.