Toggle class on span when link clicked

Question

Updated code example of what I'm trying to acheive. the featuredToggle even triggers the checkbox click event and then should toggle the css class on the #featured-icon, but it does not add the class.

<a class='favorite-btn' onclick="featuredToggle()">
                <span id='featured-icon' class="glyphicon glyphicon-star"></span>
                <input id="featured-toggle" type="checkbox" data-bind="checked: featured"/>
            </a>

function featuredToggle() { 
   $("#featured-toggle").trigger('click');
   $("#featured-icon").toggleClass('featured');
}

Answer 1

I'm guessing you're trying to do this :

$(".favorite-btn").click(function () {
    $("#featured-toggle").prop('checked', function(_,ckd) {return !ckd});
    $("#featured-icon").toggleClass('active');
});

FIDDLE

Answer 2

First you are using JQuery and not plain javascript. So within your JSFiddle you would have to select a JQuery library from the drop down. You would also have to close off some invalid quotes, but even then it wont work.

Here's a fiddle I made for you: http://jsfiddle.net/MathiasaurusRex/gLBmX/21/

$(function() {  
    $("#featured-toggle").click(function() {  
        $("#featured-icon").toggleClass("active");  
    });  
});  

Whenever #featured-toggle is clicked toggle the "active" class on #featured-icon.

Hopefully that helps you a bit!