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> 
  </ul>

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

有什么建议吗？谢谢

Answer 1

看起来你正在使用错误的id在锚点的onclick处理程序中引用LI，试试：

document.getElementById('selectedAuthorities-4_1li').click();

Answer 2

有两种方法可以处理这种非常常见的情况：

根据驱动复选框设置的服务器端数据，使用服务器端逻辑初始化类。有时这很容易，有时却不容易。
放入一个触发“点击”操作的<script>块。这是一种痛苦，因为你想在没有复选框切换的情况下触发点击;你究竟如何做到这一点取决于你的事件一般设置的方式，但在你的情况下，它实际上只需要调用该函数。

在我看来，你的“changeSelectionStyle”函数应该首先通过直接检查复选框来决定类名应该是什么。也许复选框“已选中”设置可能是函数的单独参数。

Answer 3

您在输入元素上使用onload，该元素不是该类型元素的有效事件。您需要在body元素上使用onload：

<body onload="changeSelectionStyle('selectedAuthorities-4_1li');">

显然，在你真正的应用程序中，你必须循环所有的LI。使用jQuery可以使其更加简单

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

3 个答案: