Javascript：如果选中复选框，则加载，更改 li 类答案

【问题标题】：Javascript: Onload if checkbox is checked, change li classJavascript：如果选中复选框，则加载，更改 li 类
【发布时间】：2021-09-07 05:54:05
【问题描述】：

我在 javascript 端有这段代码：

function changeSelectionStyle(id) {
    if(document.getElementById(id).className != 'yes'){
    document.getElementById(id).className = 'yes';
    }
    else{document.getElementById(id).className = '';}
}

这在 html 上：

<ul>
  <li id="selectedAuthorities-4_1li" class="">
    <input type="checkbox" id="selectedAuthorities-4_1" name="selectedAuthorities" value="ROLE_ADD_COMMENT_TO_CV" checked="checked" onload="changeSelectionStyle(this.id + 'li');" onclick="changeSelectionStyle(this.id + 'li'); checkFatherSelection(this.id);">

    <a href="#" onclick="document.getElementById('selectedAuthorities-4_1').click(); return false;">  Agregar comentario <samp><b></b>Permite agregar comentario en el detalle.</samp>
    </a>
 </li>

那么我不能得到的工作是当复选框被选中时，加载时，JS应该检查它，并将class="yes"分配给li，这里：<li id="selectedAuthorities-4_1li" class="">

我应该在我原来的 JS 函数中添加什么来实现这一点。注意li id不是静态的，它们是动态的，生成的是html li id。

解决方案的过程（逻辑）：

加载事件，检查是否检查了带有X id的输入，如果是，使用JS函数changeSelectionStyle更新父li。因为我现在遇到的问题是，当我选择一个输入（检查它）时，li 颜色正在切换，但是当它加载一个选择/检查的输入时，颜色保持不变，并且当我改变颜色时点击输入（取消勾选 - 错误效果）

【问题讨论】：

我删除了我的答案，因为似乎存在语言障碍和/或误解。请更新问题以更详细地说明问题。
我想该复选框被服务器设置为checked，那么你为什么要在 JavaScript 中这样做呢？为什么不是服务器端代码？
我已经用可能的解决方案逻辑更新了问题。
萨米尔说得有道理。如果您可以使用服务器端代码设置checked="checked"，为什么不使用相同的逻辑设置class="yes"？

标签： javascript html checkbox onload

【解决方案1】：

试试这个代码：

window.onload=function(){
 const checkBoxes=document.querySelectorAll("input[type='checkbox']");
 for(var i=0; i < checkBoxes.length; i++) 
 {
    if(checkBoxes[i].checked=='checked')
       checkBoxes[i].parentNode.className='yes';
 }
}

【讨论】：

【解决方案2】：

window.onload=function(){
var inputFields=document.getElementsByTagName('input');
var checkBoxes[];
for(var i=0;i<inputFields.length;i++)
 if(inputFields[i].type=='checkbox'&&inputFields[i].checked=='checked'&& inputFields[i].parentNode.tagName=='LI')
inputFields[i].parentNode.className='yes';
}

我们开始..

【讨论】：