Syntax error, unrecognized expression: !checked in jQuery selector

Question

I use this script in a Website with jquery 1.7.

$('input:radio[name=article-info]:!checked').parent().parent().removeClass('highlight')

I move this script in a bootstrap template but the chrome console report me this error:

Uncaught Error: Syntax error, unrecognized expression: input:radio[name=article-info]:!checked

Bootstrap use a update version of jQuery .

What should I use syntax for this version?

The complete code:

// Select input radio button
        $('input[type=radio][name=article-info]').change(function() {

               $('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight');
               $(this).parent().parent().addClass('highlight');

               // Price
               $price = $('label[for="'+ $(this).attr('id') +'"] .tr-price').text();
               $('#price-total').text($price);

               // Url btn
               $new_url = $(this).parent().siblings('.format').children().children('input').val();
               $('#btn-personalizar').attr("href", $new_url);
         });
//Select tr
        $(".data-click-tr").click(function(){


               $(".data-click-tr").removeClass('highlight')
               $(this).addClass('highlight').find('input:radio[name=article-info]').attr('checked', true);

               $get_input_id = $(this).find('input:radio[name=article-info]').val();

               // Precio
               $price = $('label[for="'+ $get_input_id +'"] .tr-price').text();
               $('#price-total').text($price);

               // Url btn personalizar
               $new_url = $(this).find('.format').children().children('input').val();
               $('#btn-personalizar').attr("href", $new_url);
         });

The HTML:

<table id="select-size">
    <thead class="size-and-price">
        <tr class="header-table">
            <th colspan="2">Tamaño</th>
            <th class="">Precio</th>
        </tr>
    </thead>
    <tbody>
        <tr class="data-click-tr highlight" data-click-tr="1426">
            <td class="input">
                <input id="1426" type="radio" name="article-info" value="1426" checked="checked">
            </td>
            <td class="format">
                <label for="">720X1080 mm <a href="//localhost:3000/manta-polar-75x100/1426">(ver ficha)</a>
                <input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-75x100/1426">
                </label>
            </td>
            <td class="price">
                <label for="1426">
                <span class="tr-price"> 39&nbsp;€</span>
                </label>
            </td>
        </tr>
        <tr class="data-click-tr" data-click-tr="6685">
            <td class="input">
                <input id="6685" type="radio" name="article-info" value="6685">
            </td>
            <td class="format">
                <label for="">950X1400 mm <a href="//localhost:3000/manta-polar-95x140/6685">(ver ficha)</a>
                <input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-95x140/6685">
                </label>
            </td>
            <td class="price">
                <label for="6685">
                <span class="tr-price"> 49&nbsp;€</span>
                </label>
            </td>
        </tr>
        <tr class="data-click-tr" data-click-tr="710">
            <td class="input">
                <input id="710" type="radio" name="article-info" value="710">
            </td>
            <td class="format">
                <label for="">1200X1900 mm <a href="//localhost:3000/manta-polar-120x190/710">(ver ficha)</a>
                <input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-120x190/710">
                </label>
            </td>
            <td class="price">
                <label for="710">
                <span class="tr-price"> 69&nbsp;€</span>
                </label>
            </td>
        </tr>
        <tr class="data-click-tr" data-click-tr="2259">
            <td class="input">
                <input id="2259" type="radio" name="article-info" value="2259">
            </td>
            <td class="format">
                <label for="">2400X1600 mm <a href="//localhost:3000/manta-polar-160x240-queen/2259">(ver ficha)</a>
                <input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-160x240-queen/2259">
                </label>
            </td>
            <td class="price">
                <label for="2259">
                <span class="tr-price"> 89&nbsp;€</span>
                </label>
            </td>
        </tr>
    </tbody>
</table>

This is a Screenshot:

Tushar · Accepted Answer · 2016-03-04 12:43:50Z

5

The ! operator cannot be used in the selectors.

You can use :not() selector to invert the selector.

$(':radio[name="article-info"]:not(:checked)')...
                              ^^^^^^^^^^^^^^

The :not(:checked) part in the selector will select the radio buttons which are unchecked.

answered Mar 4, 2016 at 12:43

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

5 Comments

Funny Frontend Over a year ago

Mmm this not report any error in console but not detect the not checked inputs...

Tushar Over a year ago

@FunnyFrontend This works!. You might be missing something else.

Tushar Over a year ago

@FunnyFrontend That Works The same code in the question. Saying again, there must be something else that might be causing the problem

Funny Frontend Over a year ago

aaahhh, I edit the main post twice, You can see the //Select tr script, this fails!

Funny Frontend Over a year ago

I accept your answer, but Can you help with with the //Select tr?

Marcos Pérez Gude · Accepted Answer · 2016-03-04 12:44:11Z

1

To add a negative control, you must use :not()

 $('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight')

answered Mar 4, 2016 at 12:44

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

1 Comment

Marcos Pérez Gude Over a year ago

This must work, but maybe the .parent().parent().removeClass() section is wrong. I don't know what HTML you have for this.

Collectives™ on Stack Overflow

Syntax error, unrecognized expression: !checked in jQuery selector

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related