Check/Uncheck aspx checkbox using Css/Jquery

I am new to ASPX GridView. I have a column of checkbox.

I need to check/uncheck it using Css/Jquery

The code for checkbox is as below:

<span class="dxICheckBox dxWeb_edtCheckBoxChecked" id="cbUploadXYZ_7_S_D">
    <span class="dxKBSW">
        <input id="cbUploadXYZ_7_S" name="ctl00$cphSiteBody$ctrlABCList$gvABCList$cell7_0$TC$cbUploadXYZ_7" value="I" type="text" readonly="readonly" style="opacity:0;width:1px;height:1px;position:relative;background-color:transparent;display:block;margin:0;padding:0;border-width:0;font-size:0pt;">
    </span>
</span>

I am checking the checkbox with code:

$($('#cbUploadUBS_7').find('span')[0]).removeClass("dxWeb_edtCheckBoxUnchecked").addClass("dxWeb_edtCheckBoxChecked");

But, when I click the above checked box, it remains checked on first click (should get unchecked on first click) and get uncheked on second click.

How can I apply CSS so that checkboxes work correctly?

Please help!