Порядок выбора флажков 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 будет использоватьсяотобразите «First», а lblA3 отобразит «Second».Если кто-то снимает флажок с Варианта 2, а Вариант 3 все еще отмечен, 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; мой код не распознавал а3 как вторую. Вот полное решение вашей обновленной проблемы. На этот раз я использовал массив.

Полный 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

Это позволит сохранить заказ в массиве. Если вы отмените выбор, позиция будет удалена. Скрипт попытается найти элемент по его значению и удалить. При повторном выборе значение добавляется.

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

Здесь у вас это есть, если вы хотите что-то более сложное (например, для проверки, когда опция не нажата), вам нужно проделать дополнительную работу.Просто протестируйте этот 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 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

Попробуйте -

$(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 6

имеют 2 переменные javascript: первую и вторую. всякий раз, когда флажок проверен, проверяется, если first равен нулю, если это так, присваивайте ему идентификатор флажка, если first не равен null, установите second