单击重置按钮

Question

我有一个包含文本框和复选框的html页面。 当我使用重置按钮调用javascript函数重置表单时，文本框值已重置。 复选框值在DOM中重置，但不在UI中反映。 如果我单击网页中的任意位置，则会在UI中重置复选框值。

可能是什么问题？

HTML

<table width="100%" border="0" cellpadding="0" cellspacing="0"
                            class="table alignright">
<tr>
        <td style="line-height: 30px;">Role:</td>
            <td>
                <input type="text" id="roleName" class="inp_style1" placeholder="" th:field="*{roleName}"/>
                <input type="hidden" th:field="*{id}"/>
            </td>
</tr>
<tr>
        <td>Student<span class="input_checkbox"><input
            type="checkbox" class="styled" name="1" th:field="*{student}" /></span></td>
</tr>
<tr>
        <td>Staff<span class="input_checkbox"><input 
            type="checkbox" class="styled" name="1" th:field="*{staff}" /></span></td>
</tr>
</table>

<div class="bttn_box">
    <button type="reset" id="resetBtn" style="display:none;"></button>
    <a href="javascript:;" onclick="clearSelectForm()">Clear</a>
</div>

的jQuery

function clearSelectForm() {
    $('#showErrorMessage').html('');
    $('#userError').html('');
    $('#resetBtn').click();
}