使用 jQuery 中的选项元素时 :checked 和 :selected 之间的区别

Question

:checked 和 :selected 在处理 <option> 元素时似乎提供相同的结果。使用一个比另一个有什么优势吗？如果 :selected 与 :checked 做同样的事情，那么它被包含在 jQuery 中的原因是什么？

示例：

<p class="p1">Select a value</p>
<p class="p2">Select a value</p>

<select>
    <option value="a">Option one</option>
    <option value="b">Option two</option>
</select>


$('select').on('change', function(){

    $('.p1').text(function() { 
        return $('option:selected').text();
    });

    $('.p2').text(function() { 
        return $('option:checked').text();
    });
});

JS Bin demo

Answer 1

从 documentation 判断，似乎 :selected 与 :checked 相同，只是它只匹配 option 元素。 HTMLOptionElement 证实了这一点，它是 DOM 中唯一具有 selected 属性的元素类型（:selected 用来测试元素的选定性）。换句话说，当您只对 option 元素感兴趣时，两个选择器是相同的——除了 :selected 是非标准的。

由于文档本身建议使用标准选择器以最大限度地提高性能（并且因为如果可以选择，您为什么不使用标准选择器而不是非标准选择器？），我认为在任何情况下都没有理由使用 :selected。我想不出 *:selected 比 option:checked 更可取的任何情况（说真的，你最后一次使用这种没有类型选择器的伪 class 是什么时候？ ).

它被包含在 jQuery 中的原因可能是因为 Selectors 3（其中 :checked 出现）在 jQuery 诞生时尚未标准化，但是 :checked 已经在规范 since 2000 中，所以我不完全相信这就是真正的原因。

Answer 2

通常，:selected 用于 SELECT OPTIONS 元素。 :checked 用于 CHECKBOX 元素。

<p class="p1">Select a value</p>
<p class="p2">Select a value</p>
  <p class="p3">Select a value</p>
  <p class="p4">Select a value</p>

<select>
<option value="a">Option one</option>
<option value="b">Option two</option>
</select>

  <input type="checkbox" value="C" />


$('input').on('change', function(){

  $('.p1').text(function() { 
    return $('option:selected').text();
  });

  $('.p2').text(function() { 
    return $('option:checked').text();
  });

  $('.p3').text(function() { 
    return $('input[type="checkbox"]:selected').val();
  });

   $('.p4').text(function() { 
    return $('input[type="checkbox"]:checked').val();
  });
});

http://jsbin.com/zadocokule/edit?html,js,output

使用 jQuery 中的选项元素时 :checked 和 :selected 之间的区别

Difference between :checked and :selected when working with option elements in jQuery

jquery

jquery-selectors