Getting jQuery unrecognized expression error

Question

I have an HTML template that contains a jQuery function that executes an Ajax request to my web server. The data in the response contains strings with car brand names and numbers which are used to set the value in an input checkbox for each particular car brand. Here's an example from the template:

<input type="checkbox" name="list" value="2">
<label for="brand">Mercedes</label>

I'm trying to use the following jQuery code to see if the input checkbox is checked for each car brand. index.name is a string and contains the car brand (e.g. "Mercedes") and index.id contains the value 2 which is a JavaScript number type (I confirmed this in the console):

$.each(data, function(key, index) {
    if ( $('input[type=checkbox][value=index.id]').prop('checked', true) ) {
        console.log("Checkbox is checked");
    }
});

When I run the jQuery code, I'm getting this error:

    Uncaught Error: Syntax error, unrecognized expression: input[type=checkbox][value=index.id]

Can anyone tell me what I'm doing wrong? I've read other Stackoverflow questions on how to do this and what I'm doing appears to be correct.

Barmar · Accepted Answer · 2018-04-10 17:34:56Z

1

You need to quote the parameter to an attribute selector if it contains any special characters (in this case, the . character):

 $('input[type=checkbox][value="index.id"]')

However, this will looks for a checkbox whose value is the literal string index.id. If you're actually trying to use the value of the expression index.id, neither way will do it, since variables aren't expanded inside strings. You need to concatenate:

$('input[type=checkbox][value="' + index.id+ '"]')

or use an ES6 template literal:

$(`input[type=checkbox][value="${index.id}"]`)

answered Apr 10, 2018 at 17:34

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jim Over a year ago

Thanks!! That's something I didn't understand.

Jim Over a year ago

But one problem now is that by looking to see if the checkbox is checked, my code is actually causing an unchecked checkbox to be checked (and vice-versa). I now need to figure out how to just read this property without altering the checkbox itself.

Barmar Over a year ago

.prop('checked', true) is for setting the value of the property. To get the value of a property you use .prop('checked'). You can also use the :checked selector: $(`input[type=checkbox][value="${index.id}"]:checked`)

Collectives™ on Stack Overflow

Getting jQuery unrecognized expression error

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related