更改类以选中复选框 JavaScript

Posted 2023-03-05

【中文标题】更改类以选中复选框 JavaScript

【英文标题】：Changing class to check a check box JavaScript

【发布时间】：2016-09-09 09:44:18

【问题描述】：

我有一个模式表单，它在页面加载时填充了我的数据库中的数据。

数据在模态中被正确地传递和填充 - 但是当一个复选框被选中时，它没有显示选中的动画并且看起来未被选中。

我知道它会被选中，虽然在第一次点击复选框时它似乎什么都不做并且仍然看起来未被选中，然后在第二次点击时它会选中复选框。

在单击复选框之前和之后检查页面时，我注意到 icheckbox_minimal 和 aria-checked="false" 也需要更改以使选中的 gfx 看起来已选中。如何使用 javascript 更改这些？

<span type="checkbox" class="" name="cbxScheduleEditTue"><div class="icheckbox_minimal" aria-checked="false" aria-disabled="false" style="position: relative;"><input id="ContentPlaceHolder2_cbxScheduleEditTue" type="checkbox" name="ctl00$ContentPlaceHolder2$cbxScheduleEditTue" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></span>

知道我正在使用以下内容可能会有所帮助：

<script src="js/bootstrap.min.js"></script>
<script src="js/icheck.js"></script>

我的javascript：

<!-- Function - modalEditSchedule -->
<script type="text/javascript">
    function modalEditSchedule(ScheduleRatesID, tempStartDate, tempEndDate, start, endtime, mon, tue, wed, thu, fri, sat, sun, CarersReq) 
        document.getElementById('<%=sidInput.ClientID%>').value = ScheduleRatesID;
        document.getElementById('<%=txtScheduleEditStartDate.ClientID%>').value = tempStartDate;
        document.getElementById('<%=txtScheduleEditEndDate.ClientID%>').value = tempEndDate;
        document.getElementById('<%=txtScheduleEditStartTime.ClientID%>').value = start;
        document.getElementById('<%=txtScheduleEditEndTime.ClientID%>').value = endtime;
        if (mon == 'Yes') 
            document.getElementById('<%=cbxScheduleEditMon.ClientID%>').checked = true;
        
        if (tue == 'Yes') 
            document.getElementById('<%=cbxScheduleEditTue.ClientID%>').checked = true;
        
        if (wed == 'Yes') 
            document.getElementById('<%=cbxScheduleEditWed.ClientID%>').checked = true;
        
        if (thu == 'Yes') 
            document.getElementById('<%=cbxScheduleEditThu.ClientID%>').checked = true;
        
        if (fri == 'Yes') 
            document.getElementById('<%=cbxScheduleEditFri.ClientID%>').checked = true;
        
        if (sat == 'Yes') 
            document.getElementById('<%=cbxScheduleEditSat.ClientID%>').checked = true;
        
        if (sun == 'Yes') 
            document.getElementById('<%=cbxScheduleEditSun.ClientID%>').checked = true;
        
        document.getElementById('<%=ddlScheduleEditCarersReq.ClientID%>').value = CarersReq;
    ;
</script>

【问题讨论】：

请提供一个工作示例。您的问题中不必要的代码太多，请专注于您的问题。

在工作示例中，我们指的是 html 和 JAVASCRIPT，而不是一些 ASP。您在问题编辑器中有一个 sn-p 编辑器 - 请使用它

【参考方案1】：

Icheck 实用程序 (js/icheck.js) 正在劫持和包装您的复选框，这就是您的方法被 icheck 行为覆盖的原因。 Learn about it.

// try replacing this calls: 
document.getElementById('<%=cbxScheduleEditSun.ClientID%>').checked = true;

// by this ones (dont forget to add the '#' at the beggining):
$('#<%=cbxScheduleEditSun.ClientID%>').iCheck('check');

或者，作为补充，您可以使用纯 jQuery，read this answer。

【讨论】：

谢谢，这解释了为什么它不起作用，并提供了有效的解决方案

【参考方案2】：

您可以使用setAttribute 函数更改元素的任何属性。

document.getElementById('<%=cbxScheduleEditWed.ClientID%>').setAttribute('aria-checked', 'false');