javascript - 如何在不使用 getElementBy "id"或 "name"attr 的情况下检查复选框是否已选中？

Question

我只使用 IE8。

我有多个复选框，因此我无法为每个复选框编写单独的 onchange 函数。

这是我尝试做的

HTML

<input checked type='checkbox' id='check1' onchange = 'checkChange()'>Ch1</input> 
<input checked type='checkbox' id='check2' onchange = 'checkChange()'>Ch2</input>
<input checked type='checkbox' id='check3' onchange = 'checkChange()'>Ch3</input>

JS

function checkChange() {
if ($(this).is(':checked')) {
alert("Box " + $(this).id + " is checked");
}
else {
alert("Box " + $(this).id + " is unchecked");
}
}

它无法正常工作。如何获取显示已选中或未选中的复选框 ID 的警报消息

谢谢

Answer 1

this 与使用 on* 处理程序时引发事件的元素无关，您需要将其作为参数传递:

<input checked="checked" type="checkbox" id="check1" onchange="checkChange(this)">Ch1
<input checked="checked" type="checkbox" id="check2" onchange="checkChange(this)">Ch2
<input checked="checked" type="checkbox" id="check3" onchange="checkChange(this)">Ch3

然后您可以在 JS 代码中使用它:

function checkChange(that) {
    if ($(that).is(':checked')) {
        alert("Box " + that.id + " is checked");
    }
    else {
        alert("Box " + that.id + " is unchecked");
    }
}

您还可以去掉丑陋的属性并使用纯 jQuery 实现:

<input checked="checked" type="checkbox" id="check1" class="check">Ch1
<input checked="checked" type="checkbox" id="check2" class="check">Ch2
<input checked="checked" type="checkbox" id="check3" class="check">Ch3

$(function() {
    $('.check').change(function() {
        var state = this.checked ? "checked" : "unchecked";
        alert("Box " + this.id + " is " + state);
    });
});