使用复选框和多个选择器更改功能

时间:2015-10-15 08:57:40

标签: javascript jquery checkbox statements

我正在尝试限制同时检查的两种不同类型的复选框的数量。我想创建一个特定的盒子组合检查,然后发出警报,三个黄色和两个红色。我的问题是警报只触发一个语句而不是两个语句。 我只能检查两个红色但是我想要的黄色。

$('input[name=redChoice], input[name=yellowChoice]').change(function() {

    var cntRed = $('input[name=redChoice]:checked').length;
    var cntYellow = $('input[name=yellowChoice]:checked').length;

    var maxRedAllowed2 = 2;
    var maxYellowAllowed3 = 3;

    if (cntRed > maxRedAllowed2 && cntYellow > maxYellowAllowed3) {
        $(this).prop('checked', false);
        alert("Du har valt 3 stycken gula och 2 stycken röda."); 
    }
});

1 个答案:

答案 0 :(得分:1)

试试这个。我相信这就是你要找的东西。

您希望能够点击不超过2个红色和3个黄色,同时,如果有2个红色和3个黄色点击,则需要显示警告



$('input[name=redChoice], input[name=yellowChoice]').change(function() {

    var cntRed = $('input[name=redChoice]:checked').length;
    var cntYellow = $('input[name=yellowChoice]:checked').length;

    var maxRedAllowed2 = 2;
    var maxYellowAllowed3 = 3;

    
    
     if (cntRed == maxRedAllowed2 && cntYellow == maxYellowAllowed3) {
        //$(this).prop('checked', false);
        alert("Du har valt 3 stycken gula och 2 stycken röda."); 
    }
    else if (cntRed > maxRedAllowed2){
       $(this).prop('checked', false);
    }
    else if (cntYellow > maxYellowAllowed3){
       $(this).prop('checked', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
red<input type="checkbox" name="redChoice"/>
red<input type="checkbox" name="redChoice"/>
red<input type="checkbox" name="redChoice"/>
red<input type="checkbox" name="redChoice"/>
yellow<input type="checkbox" name="yellowChoice"/>
yellow<input type="checkbox" name="yellowChoice"/>
yellow<input type="checkbox" name="yellowChoice"/>
yellow<input type="checkbox" name="yellowChoice"/>
yellow<input type="checkbox" name="yellowChoice"/>
&#13;
&#13;
&#13;