Short Bootstrap Checkbox variant works in jsFiddle, but not in my .jsp page

I am trying to implement these checkboxes into my JSP application.

HTML:

   <div class="row" id="checkboxes">
      <div class="col-xs-12">
         <div class="form-group">
            <label for="" class="col-md-6 control-label">Select any checkbox options:</label>
            <div class="col-md-6">
               <input name="checkbox1" type="hidden" value="0"/>
               <input name="checkbox2" type="hidden" value="0"/>
               <input name="checkbox3" type="hidden" value="0"/>
               <div class="btn-group" data-toggle="buttons">
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox2">Maybe</button>
                  <button type="button" class="btn btn-default" data-checkbox-name="checkbox3">No</button>
               </div>
            </div>
         </div>
      </div>
   </div>

JavaScript:

$('.btn[data-checkbox-name]').click(function() {
    $('input[name="'+$(this).data('checkboxName')+'"]').val(
        $(this).hasClass('active') ? 0 : 1
    );
});

Here is what I know:

• The buttons are correctly displayed in my page
• The onclick functions are triggered when clicking a button
• this inside the onclick method, returns the correct element, in console.log
• example: <button type="button" class="btn btn-default" data-checkbox-name="checkbox1">Yes</button>
• Using the above example, $(this).data('checkboxName') returns "checkbox1"
• $('input[name="checkbox1"]').hasClass('active') returns false
• $('input[name="checkbox1"]').val(); always returns 0 initially
• Clicking the button with the mouse, changes the return of previous statement to 1, meaning it correctly noticed that it wasn't active. But it is still not active, unlike the jsFiddle version.
• Clicking it again, changes nothing at all.
• The above statements are valid for all of the checkboxes.
• $('input[name="checkbox1"]').val(0); returns <input name="checkbox1" type="hidden" value="0">
• $('input[name="checkbox1"]').val(); returns 0 now. Button is still not active, except when the mouse button is pressed.
• $('input[name="checkbox1"]').hasClass('active') returns false

It seems like everything is happening as in the jsfiddle, except for the fact that the active class is never set. I can't really se where in the code it would add or remove it. After going through the code as best as I could, I am more surprised that it actually works in jsFiddle, than the fact that it doesn't in my JSP.

So why is this working in jsFiddle, and not in my JSP page?

PS: I don't know if this is relevant, but the fiddle uses bootstrap 3.0.0, while I use 3.3.5