Différence entre: vérifié et: sélectionné lorsque vous travaillez avec des éléments d'option dans jQuery

Question

Les deux :checked et :selected semblent fournir des résultats identiques lorsque vous travaillez avec des éléments <option>. Y at-il un avantage à utiliser l'un sur l'autre? Si :selected fait la même chose que :checked, quelle est la raison pour laquelle il doit être inclus dans jQuery?

Exemple:

<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

A en juger par le documentation, il semble que :selected est identique à :checked à l'exception qu'il correspond uniquement à option éléments. En d'autres termes, lorsque vous n'êtes intéressé que par les éléments option, les deux sélecteurs sont identiques - sauf que :selected n'est pas standard. Puisque la documentation elle-même recommande d'utiliser des sélecteurs standard pour maximiser les performances (et pourquoi non utiliserait-il un sélecteur standard par rapport à un sélecteur standard si le choix lui en est donné?), Je ne pense pas qu'il y ait de raison utiliser :selected dans n'importe quelle situation. Je ne peux pas penser à une situation dans laquelle *:selected serait préférable à option:checked (sérieusement, quand était la dernière fois que vous avez utilisé une pseudo-classe de ce genre sans un sélecteur de type?).

Peut-être la raison pour laquelle il a été inclus dans jQuery est parce que Selectors 3 (dans lequel apparaît :checked) n'a pas été standardisée au moment jQuery est né, mais :checked a été dans la spécification since 2000, donc je ne suis pas entièrement convaincu C'est vraiment la raison.

Answer 2

Normalement,: sélectionné pour les éléments SELECT OPTIONS. : vérifié est pour les éléments 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