$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>javascript - Syntax error, unrecognized expression: !checked in jQuery selector - Stack Overflow|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>javascript - Syntax error, unrecognized expression: !checked in jQuery selector - Stack Overflow

    javascript - Syntax error, unrecognized expression: !checked in jQuery selector - Stack Overflow

    matteradmin12PV0评论

    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 plete 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:

    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 plete 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:

    • javascript
    • jquery
    Share Improve this question edited Mar 4, 2016 at 13:01 Funny Frontend asked Mar 4, 2016 at 12:43 Funny FrontendFunny Frontend 3,92512 gold badges40 silver badges56 bronze badges
    Add a ment  | 

    2 Answers 2

    Reset to default 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.

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

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

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far