Question

我意外地偶然发现了这件事，我想知道这是一个错误还是预期的行为。我设置了一个输入类型=＆＃34;隐藏＆＃34;我认为这是不可能的。但是根据使用的jQuery选择器，这个字段会被返回或不返回。

HTML：

<form>
  <div>Checkbox: <input class="test" type="checkbox" name="check" value="1" /></div>
  <div>Hidden: <input class="test" type="hidden" name="check" value="1" /></div>
  <div><input id="button" type="button" value="run test" /></div>
  <div>Results:</div>
  <div id="resultA"><strong>$('.test:checked')</strong><br /></div>
  <div id="resultB"><strong>$('.test:checked[value=1]')</strong><br /></div>
  <div id="resultC"><strong>$('.test:checked[value="1"]')</strong><br /></div>
</form>

jQuery的：

$(function() {
  $('#button').click(function() {
    $('.test').prop('checked', true);

    $('.test:checked').each(function() {
      $('#resultA').append($(this).attr('type') + ' - checked<br />');
    });

    $('.test:checked[value=1]').each(function() {
      $('#resultB').append($(this).attr('type') + ' - checked<br />');
    });

    $('.test:checked[value="1"]').each(function() {
      $('#resultC').append($(this).attr('type') + ' - checked<br />');
    });
  });
});

以上示例作为JSFiddle：https://jsfiddle.net/m5fatj8q/6/

ResultA：仅返回复选框。

ResultB：返回复选框和隐藏字段！

ResultC：仅返回复选框。

我的任务是：

为什么resultB会返回隐藏字段？这是一个错误还是预期的行为？

Answer 1

属性选择器[value=1]无效;您在属性选择器中匹配的值必须是一个字符串（用引号表示，根据您的第三个选项）或CSS identifier

不能以数字开头。

这就是2和3之间行为不同的原因。

然后它在1和2之间的差异必须归结为Sizzle中的错误，jQuery是内部使用的选择器引擎，而不是正确处理无效的选择器。如果您改为使用querySelectorAll，则会获得

'。test：checked [value = 1]'不是有效的选择器。

我不是Sizzle源代码的专家，但我认为问题是their definition of an attribute的组合：

// "Attribute values must be CSS identifiers [capture 5] or strings [capture 3 or capture 4]"

和here：

// Move the given value to match[3] whether quoted or unquoted
match[3] = ( match[3] || match[4] || match[5] || "" ).replace( runescape, funescape );

看起来只是使用给定的值，无论它是否被引用。然后由the check for :checked加重：

return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected);

这似乎只是为了确保它是<input>元素，而not specifically是一个复选框或单选按钮。

输入类型=＆＃34;隐藏＆＃34;的奇怪行为和道具（＆＃34;已检查＆＃34;，true）

1 个答案: