Различные комбинации флажков, которые дают разные результаты с использованием jQuery

Question

Что я хотел бы сделать, так это дать пользователю довольно простую рекомендацию, в этом примере у меня есть 5 вариантов и 3 ответа. Ответы будут назначены конкретным комбинациям значений флажка.

Например, проверка только «A» может привести к результату 1, а если проверены «A» и «B», то ответ - результат 2. D, E, A может дать результат 3, а B, E, A - Результат 2. Надеюсь, вы поняли.

 <form action="">
        <input type="checkbox" name="options" value="A" />Choice A<br />
        <input type="checkbox" name="options" value="B" />Choice B<br />
        <input type="checkbox" name="options" value="C" />Choice C<br />
        <input type="checkbox" name="options" value="D" />Choice D<br />
        <input type="checkbox" name="options" value="E" />Choice E<br />   
        <br />
        <input type="submit" value="answer">
</form>

и jquery будет что-то вроде этого

$(':checkbox').click(function () {
    var value = $(this).val();

    if ($(this).val(["A","B","C"]).is(':checked'))
        $('.result1').show(value);
    else
        $('.result1').hide(value);

    if ($(this).val(["A","D","E"]).is(':checked'))
        $('.result2').show(value);
    else
        $('.result2').hide(value);

Имеет ли это смысл? Буду признателен за любую помощь. Я добавил свою проблему в jsfiddle, если кто-то хочет лучше рассмотреть мою проблему

http://jsfiddle.net/gdjones83/tJY69/32/

Answer 1

Вам нужны две вспомогательные функции:

Это небольшое расширение jQuery позволит вам узнать все val() результаты набора элементов, получив их в виде массива:

$.fn.multipleVals = function() {
    var result = new Array();
    $(this).each(function() {
        result.push($(this).val());
    })
    return result;
}

И этот поможет вам узнать, содержат ли два массива одинаковые элементы (это не одно и то же, если они равны или нет. Чтобы быть равными, оба должны иметь одинаковые элементы с одинаковыми ключами в одном порядке Мы не проверяем это):

function arraysSameElements(array1, array2) {
    if(array1.length == array2.length) {
        for(var i in array1)
            if($.inArray(array1[i], array2) == -1)
                return false;
        return true;
    }

    return false;
}

Имея это, теперь вы можете сделать что-то вроде этого:

if (arraysSameElements($("form input:checkbox:checked").multipleVals(), ["A","B","C"]))
    $('.result1').show(value);
else
    $('.result1').hide(value);

В $("form input:checkbox:checked") вы получаете все отмеченные флажки (: P) в form. Затем с помощью multipleVals вы помещаете все результаты .val() в массив и сравниваете их с сформированным массивом, содержащим ответы, необходимые для отображения того или иного результата.

Удачи!