onchange不工作的addEventListener

Question

点击复选框后，我想显示城市名称

我的表非常简单：

<table>
    <tr>
        <th>Y</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" ></td>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" ></td>
        <td>D</td>
        <td>E</td>
        <td>F</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" ></td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
    </tr>
</table>

AND JS代码：

document.getElementsByClassName("check").addEventListener("change", function() {
            var parent = this.parentNode;
            var city = parent.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML;

            alert(city);
});

这段代码不起作用。为什么？

此致