Javascript: Onload如果选中了复选框，则更改li类

Question

我在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颜色正在切换，但当它加载一个选中/选中的输入时，该颜色保持不变，并且当我单击该输入时它会改变颜色(取消选中它-错误的效果)

Answer 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';
 }
}

Answer 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';
}

开始吧..。