Javascript复选框选择顺序答案

【问题标题】：Javascript checkbox selection orderJavascript复选框选择顺序
【发布时间】：2020-03-27 19:10:46
【问题描述】：

我将如何检测复选框被选中的顺序？我有一个表单上的复选框列表，我需要让用户选择他们的第一个和第二个选择（但没有更多）。所以，鉴于此：

<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”。如果有人在选项 3 仍处于选中状态时取消选中选项 2，则 lblA3 将变为“第一”。希望这有意义吗？

谢谢！

【问题讨论】：

看看这个“web 2.0-style”控件：myphpetc.com/2009/12/jquery-php-voting-widget.html

标签： javascript jquery

【解决方案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");
            }
        }
    });
});

【讨论】：

我已经更新了我的解决方案，正如我所提到的，第一个解决方案不完整。请检查更新的解决方案。谢谢。
但在“[a user checks] a1, then a2, then a3, then un-check a2”的情况下，是否应将取消检查视为对 a2 的第二次（故意）操作，（给出命令：a1、a2、a3、a2) 或删除一个动作（给出命令：a1、a3）？这个想法似乎是一种有趣的方式来实现非验证码人工验证。
如果我添加jq('#btn').click(function () { alert(WHAT SHOULD BE HERE??); }); 当我点击按钮时，我如何检查警报的值？谢谢。

【解决方案2】：

第一个和第二个有 2 个 javascript 变量。每当检查复选框时，请检查是否第一次为null，是否为其分配了复选框ID，是否第一个不是null设置第二个。

【讨论】：

【解决方案3】：

您可以有一个更改侦听器和一个隐藏字段。每次用户选择一个复选框时，您都会添加该值。像这样（假设#parent 是盒子的父元素）：

$('#parent').delegate('input[type=checkbox]', 'change', function() {
    if($(this).is(':checked')) {
        $('#hidden').val($('#hidden').val() + " " + $(this).val())
    }
});

隐藏字段的值将类似于a2 a3 a1...

如果你想在服务器端处理信息。然后，您可以在服务器端拆分字符串并检查它。当然，您必须处理删除和添加选择。

如果你只是想在客户端处理值，你可以将它添加到一个数组中：

var selected = [];
$('#parent').delegate('input[type=checkbox]', 'change', function() {
    if($(this).is(':checked')) {
        selected.push($(this).val());
    }
});

【讨论】：

【解决方案4】：

试试 -

$(document).ready(function(){
var checked_no = 0;
$('input[name="checkbox1"]').change(function(){
alert($('input[name="checkbox1"]').filter(':checked').length);
checked_no = $('input[name="checkbox1"]').filter(':checked').length;
// checked_no acts as a counter for no of checkboxes checked.
});
});

【讨论】：

【解决方案5】：

在这里，如果您想要更复杂的东西（例如，在未单击选项时进行测试），您必须做一些额外的工作。只需在浏览器中测试此 html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type = "text/javascript">
        var checkboxClicks =  new Array(2);
        function updateClickOrder(checkbox) {
            if (checkbox.checked) {
                if (checkboxClicks[0] ==null) {
                    checkboxClicks[0]  = checkbox.value;
                } else if (checkboxClicks[1] ==null) {
                    checkboxClicks[1]  = checkbox.value;
                }
            }
            document.forms[0].clickOrder.value = checkboxClicks[0] + ", " + checkboxClicks[1];
            alert(document.forms[0].clickOrder.value);
            //alert("Clicked " + checkbox.value);
        }

    </script>
</head>
<body>
<form name="testCheckboxClickOrder">
    <input name="checkbox1" type="checkbox" value="a1" onchange="updateClickOrder(this);"> Option 1
    <input name="checkbox1" type="checkbox" value="a2" onchange="updateClickOrder(this);"> Option 2
    <input name="checkbox1" type="checkbox" value="a3" onchange="updateClickOrder(this);"> Option 3
    <input name="checkbox1" type="checkbox" value="a4" onchange="updateClickOrder(this);"> Option 4
    <input type="hidden" name="clickOrder"/>
</form>
</body>
</html>

【讨论】：

【解决方案6】：

这会将订单保存在一个数组中。如果取消选择该位置将被删除。该脚本将尝试通过其值查找元素并删除。如果您再次选择，则会添加该值。

<input type="checkbox" value="v1" />
<input type="checkbox" value="v2" />
<input type="checkbox" value="v3" />
<input type="checkbox" value="v4" />

<textarea id="result"></textarea>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var userInput = [];
    var c = 0;

    $("input[type=checkbox]").click(function()
    {
        if ($(this).attr("checked"))
        {
            userInput[c] = $(this).val();
            ++c;
        }
        else
        {
            var i = parseInt(userInput.join().indexOf($(this).val())) - 2;
            userInput.splice(i, 1);
        }
    });


    $("textarea").click(function()
    {
        $(this).val("");
        for (var i in userInput)
        {
            $(this).val($(this).val() + " " + userInput[i]);
        }
    });
</script>

【讨论】：

【解决方案7】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input name="checkbox1" type="checkbox" id="myCheck" value=" Option 1" onclick="myFunction('Option 1')" /> Option 1
<input name="checkbox1" type="checkbox" id="myCheck2" value=" Option 2" onclick="myFunction2('Option 2')" /> Option 2
<input name="checkbox1" type="checkbox" id="myCheck3" value=" Option 3" onclick="myFunction3('Option 3')" /> Option 3
<input name="checkbox1" type="checkbox" id="myCheck4" value=" Option 4" onclick="myFunction4('Option 4')" /> Option 4
<p id="getValues"></p>
</body>
<script>
var array = [];
function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}

function myFunction(text) {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  // If the checkbox is checked, display the output text
  if (checkBox.checked == true)
  {
    array.push(text);
  }
  else
  {
  	removeA(array, text);
  }
  getValues();
}
function myFunction2(text) {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck2");
  // Get the output text
  // If the checkbox is checked, display the output text
  if (checkBox.checked == true)
  {
    array.push(text);
  }
  else
  {
  	removeA(array, text);
  }
  getValues();
}
function myFunction3(text) {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck3");
  // Get the output text
  // If the checkbox is checked, display the output text
  if (checkBox.checked == true)
  {
    array.push(text);
  }
  else
  {
  	removeA(array, text);
  }
  getValues();
}
function myFunction4(text) {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck4");
  // Get the output text
  // If the checkbox is checked, display the output text
  if (checkBox.checked == true)
  {
    array.push(text);
  }
  else
  {
  	removeA(array, text);
  }
  getValues();
}

function getValues()
{
	$("#getValues").html(array.join("<br>"));
}
</script>
</html>

【讨论】：