Checkbox Toggle Plugin not working as expected

I am using Checkbox toggle plugin for a nice display of toggle effects in checkboxes.The concern is Checkbox is displaying along with the togglebutton.

Jquery Checkbox display

Interesting part is that on debuggin the html part ,I found style of input checkbox is set to dispaly:none.

Jquery plugin calling

 @Html.CheckBoxFor(m => m.Gender, new {@class="chkbxSwitch", @id = "chkbxGender" })
 $("#chkbxGender").checkboxpicker({
    offClass: 'btn-primary',
    onClass: 'btn-primary',
    offLabel:'MALE',   
    onLabel: 'FEMALE'

});

Rendered HTML Output

<input class="chkbxSwitch" data-val="true" data-val-required="The Gender field is required." 
id="chkbxGender" name="Gender" type="checkbox" value="true" style="display: none;">
         <div class="btn-group" tabindex="0">
             <a class="btn active btn-primary">MALE</a>
             <a class="btn btn-default">FEMALE</a>
         </div>
         <input name="Gender" type="hidden" value="false">