javascript - 如何获取状态并在状态更改时引发事件？

Question

我在类(class)表页面上有以下复选框。我想获取页面加载时选中的复选框的值，而现在提交页面时未选中的复选框的值。我怎样才能在 JavaScript 中做到这一点？

</tr>
<tr valign="baseline" class="oddRow">
<td class="bold">0191</td>
<td class="bold">ART 1 (P)</td>
<td class="bold">S1</td>
<td>A</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="DarkGray" style="background-color:DarkGray">1<input type="checkbox" name="Periods" value="25325798" TITLE="0191.1 :  31/36&#xa;&nbsp;Thomas, Marc L" checked></td>
<td bgcolor="Indianred" style="background-color:Indianred">1*<input type="checkbox" name="Periods" value="25325799" TITLE="0191.2 :  36/36&#xa;&nbsp;Ericson, Daniel J"></td>
<td bgcolor="Indianred" style="background-color:Indianred">1*<input type="checkbox" name="Periods" value="25325800" TITLE="0191.3 :  36/36&#xa;&nbsp;Ericson, Daniel J"></td>
<td bgcolor="Indianred" style="background-color:Indianred">1*<input type="checkbox" name="Periods" value="25325801" TITLE="0191.4 :  37/36&#xa;&nbsp;Thomas, Marc L"></td>
</tr>

Answer 1

您可以使用 window.onload，然后循环遍历复选框以查找已选中的复选框。

<script>
window.onload = function()
{
    var cbs = document.getElementsByClassName('checkbox');

    for(var i = 0; i < cbs.length; i++)
    {
        if(cbs[i].checked)
        {
            console.log(cbs[i].value);
        }
    }
}
</script>

</tr>
<tr valign="baseline" class="oddRow">
<td class="bold">0191</td>
<td class="bold">ART 1 (P)</td>
<td class="bold">S1</td>
<td>A</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="DarkGray" style="background-color:DarkGray">1<input type="checkbox" class="checkbox" name="Periods" value="25325798" TITLE="0191.1 :  31/36&#xa;&nbsp;Thomas, Marc L" checked></td>
<td bgcolor="Indianred" style="background-color:Indianred">1*<input type="checkbox" class="checkbox" name="Periods" value="25325799" TITLE="0191.2 :  36/36&#xa;&nbsp;Ericson, Daniel J"></td>
<td bgcolor="Indianred" style="background-color:Indianred">1*<input type="checkbox" class="checkbox" name="Periods" value="25325800" TITLE="0191.3 :  36/36&#xa;&nbsp;Ericson, Daniel J"></td>
<td bgcolor="Indianred" style="background-color:Indianred">1*<input type="checkbox" class="checkbox" name="Periods" value="25325801" TITLE="0191.4 :  37/36&#xa;&nbsp;Thomas, Marc L"></td>
</tr>