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

谢谢！

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");
            }
        }
    });
});

Answer 2

首先有2个javascript变量。每当选中一个复选框时，检查first是否为null，如果是，则为其分配复选框id，如果first不是null，则设置为second。

Answer 3

尝试 -

$(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.
});
});

Answer 4

您可以拥有更改侦听器和隐藏字段。每次用户选中复选框时，都会添加该值。像这样（假设#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());
    }
});

Answer 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>

Answer 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>

Answer 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>

Javascript复选框选择顺序

7 个答案: