Javascript 复选框选择顺序

Question

我将如何检测复选框被选中的顺序？我在表单上有一个复选框列表，我需要让用户选择他们的第一和第二选择(但不能再多了)。所以，鉴于此:

<input name="checkbox1" type="checkbox" value="a1"> Option 1
<input name="checkbox1" type="checkbox" value="a2"> Option 2
<input name="checkbox1" type="checkbox" value="a3"> Option 3
<input name="checkbox1" type="checkbox" value="a4"> Option 4

如果有人选择选项 2，然后选择选项 3，我希望有一些指示器表明选项 2 是第一选择，选项 3 是第二选择。有什么想法吗？

提前致谢。

更新:

这些都是非常有用的建议，谢谢。当我测试这些示例时，它让我更好地了解如何解决问题 - 但我仍然有点卡住(我是 JS 新手)。我想要做的是随着复选框被选中或取消选中而更改这些标签，以指示哪个是第一个或第二个选择:

<label id="lblA1"></label><input name="checkbox1" type="checkbox" value="a1"> Option 1
<label id="lblA2"></label><input name="checkbox1" type="checkbox" value="a2"> Option 2
<label id="lblA3"></label><input name="checkbox1" type="checkbox" value="a3"> Option 3
<label id="lblA4"></label><input name="checkbox1" type="checkbox" value="a4"> Option 4

因此，如果有人点击选项 2，然后点击选项 3，lblA2 将显示“First”，而 lblA3 将显示“Second”。如果有人取消选中选项 2 而选项 3 仍处于选中状态，则 lblA3 变为“First”。希望这是有道理的？

谢谢!

Answer 1

如果您使用的是 jQuery。下面的代码是按照您的解释进行的，并且已经过测试。 我使用了全局变量。

<input name="checkbox1" type="checkbox" value="a1" /> Option 1
<input name="checkbox1" type="checkbox" value="a2" /> Option 2
<input name="checkbox1" type="checkbox" value="a3" /> Option 3
<input name="checkbox1" type="checkbox" value="a4" /> Option 4
<input type="button" value="do" id="btn" />

如下所示，它还处理了用户取消选中选项的情况。

$(document).ready(function () {
    var first = "";
    var second = "";
    $('input[name="checkbox1"]').change(function () {
        if ($(this).attr('checked')) {
            if (first == "") {
                first = $(this).attr('value');
            }
            else if (second == "") {
                second = $(this).attr('value');
            }
        }
        else {
            if (second == $(this).attr('value')) {
                second = "";
            }
            else if (first == $(this).attr('value')) {
                first = second;
                second = "";
            }
        }
    });
    $('#btn').click(function () {
        alert(first);
        alert(second);
    });
});

希望对您有所帮助。

更新[重要]:

我注意到我以前的代码不完整，例如，如果您检查 a1，然后是 a2，然后是 a3，然后取消检查 a2；我的代码没有将 a3 识别为第二个。 这是您更新后的问题的完整解决方案。我这次用的是数组。

完整的 HTML:

<label id="lblA1"></label>
<input name="checkbox1" type="checkbox" value="a1" /> Option 1
<label id="lblA2"></label>
<input name="checkbox1" type="checkbox" value="a2" /> Option 2
<label id="lblA3"></label>
<input name="checkbox1" type="checkbox" value="a3" /> Option 3
<label id="lblA4"></label>
<input name="checkbox1" type="checkbox" value="a4" /> Option 4

完整的 Javascript:

$(document).ready(function () {
    var array = [];
    $('input[name="checkbox1"]').click(function () {
        if ($(this).attr('checked')) {
            // Add the new element if checked:
            array.push($(this).attr('value'));
        }
        else {
            // Remove the element if unchecked:
            for (var i = 0; i < array.length; i++) {
                if (array[i] == $(this).attr('value')) {
                    array.splice(i, 1);
                }
            }
        }
        // Clear all labels:
        $("label").each(function (i, elem) {
            $(elem).html("");
        });
        // Check the array and update labels.
        for (var i = 0; i < array.length; i++) {
            if (i == 0) {
                $("#lbl" + array[i].toUpperCase()).html("first");
            }
            if (i == 1) {
                $("#lbl" + array[i].toUpperCase()).html("second");
            }
        }
    });
});