语法错误，无法识别的表达式：！在 jQuery 选择器中检查

Question

我在带有 jquery 1.7 的网站中使用此脚本。

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

我将此脚本移动到引导模板中，但 chrome 控制台向我报告此错误：

未捕获的错误：语法错误，无法识别的表达式：input:radio[name=article-info]:!checked

Bootstrap 使用 jQuery 的更新版本。

这个版本我应该使用什么语法？

完整代码：

// 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);
         });

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>

这是一个截图：

Answer 1

要添加阴性对照，必须使用:not()

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

Answer 2

! 运算符不能在选择器中使用。

您可以使用:not() 选择器来反转选择器。

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

选择器中的:not(:checked) 部分将选择未选中的单选按钮。