复选框的不同组合使用jQuery产生不同的结果

时间:2011-03-10 02:33:17

标签: jquery checkbox

我想做的是向用户提供一个相当基本的建议,在这个例子中我有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/

1 个答案:

答案 0 :(得分:0)

您需要两个辅助函数:

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()结果放入一个数组中,并将它们与具有显示一个或另一个结果所需答案的已形成数组进行比较。

祝你好运!