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

发布于 2024-09-01 19:03:47 字数 1291 浏览 9 评论 0原文

我在 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，这里：

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

解决流程（逻辑）：

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

原文

I have this code on javascript side:

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

And this on 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>

Well what I cant get work is when the checkbox is selected, on load, the JS should check it, and assign class="yes" to the li, here: <li id="selectedAuthorities-4_1li" class="">

What should I add to my original JS function to make that possible. Note that li ids are not static, they are dynamic, the html li id is generated.

Process for the solution (logic):

Event on load, check if the input with X id is checked, if it is, update the parent li with the JS function changeSelectionStyle. Because the problem that I have right now, is that when I select an input (check it), the li color is switching, but when it loads with a selected/checked input, the color remains untouched, and its changing the color when I click the input (uncheck it - wrong effect)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清旖 2024-09-08 19:03:47

试试这个代码：

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

Try this code:

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

回复收藏 0 原文

山有枢 2024-09-08 19:03:47

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

开始了..

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

Here we go..

回复收藏 0 原文

~没有更多了~