Javascript 单击重置按钮后刷新UI

我有一个包含文本框和复选框的html页面。 当我使用reset按钮调用javascript函数重置表单时，textbox值被重置。 复选框值在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>

---

您使用的库会更改复选框的Ui吗？您可以发布您正在调用的函数吗？使用html和Javascript更新听起来您试图强制浏览器显式地重新绘制状态已更改的Ui部分。这些可能是相关的：，复位按钮仅在输入/复选框（包括复位按钮）位于

和

标记之间时工作。工作js小提琴示例：

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