Erreur Javascript Uncaught TypeError: $(...).onclick n'est pas une fonction

Je suis Javascript débutant et j'ai une erreur sur mon Javascript.

javascript

$(function(){
    $(".widgetselecterbtn").onclick(function(){
        var index = $(".widgetselecterbtn").index(this);
        $('.itemselected').addClass('hide');
        $('.itemselected').eq(index).removeClass('hide');
    });
});

html

<ul id="wighet">
    <li><div><i class="fa fa-header fa-lg"></i><br><a class="widgetselecterbtn">heading</a></div></li>
    <li><div><i class="fa fa-pencil fa-lg"></i><br><a  class="widgetselecterbtn">text</a></div></li>
    <li><div><i class="fa fa-youtube fa-lg"></i><br><a class="widgetselecterbtn">Youtube</a></div></li>
    <li><div><i class="fa fa-quote-left fa-lg"></i><br><a class="widgetselecterbtn">quate</a></div></li>
    <li><div><i class="fa fa-link fa-lg"></i><br><a class="widgetselecterbtn">link</a></div></li>
    <li><div><i class="fa fa-picture-o fa-lg"></i><br><a class="widgetselecterbtn">image</a></div></li>
    <li><div><i class="fa fa-twitter fa-lg"></i><br><a class="widgetselecterbtn">Twitter</a></div></li>
</ul>
<div class="ItemWidget01 itemselected hide">                 
</div>
<div class="ItemWidget01 itemselected hide">            
</div>
<div class="ItemWidget01 itemselected hide">            
</div>
<div class="ItemWidget01 itemselected hide">                 
</div>
<div class="ItemWidget01 itemselected hide">                
</div>
<div class="ItemWidget01 itemselected hide">                
</div>
<div class="ItemWidget01 itemselected hide">                  
</div>

L'erreur est

Uncaught TypeError: $(...).onclick n'est pas une fonction

Comment puis-je résoudre ce problème?

Grâce