Question

我有一个复选框，我希望用户选择最多3.我无法弄清楚如何做到这一点。

artificial intelligence <input type = "checkbox" name = "topic[]" value = "29"  >
computer graphics <input type = "checkbox" name = "topic[]" value  = "30" >
computer animation <input type = "checkbox" name = "topic[]" value = "31" >
software engineering <input type = "checkbox" name = "topic[]" value = "32" >

Answer 1

您是否考虑过UI将如何处理？以下是使用jQuery的一种方法：

// adjust this to be all checkboxes in the group
var theCheckboxes = $("input[type='checkbox']"); 

theCheckboxes.click(function()
{
    if (theCheckboxes.filter(":checked").length > 3)
        $(this).removeAttr("checked");
});

http://jsfiddle.net/jyYu5/

这可以防止在标记三个之后进行检查，但不会在视觉上禁用这些字段。所以这是另外需要考虑的事情。

此外，您还必须检查服务器端是否只标记了三个，因为用户显然可以提交他想要的任何数据。

Answer 2

你可以很容易地使用jQuery做到这一点。直接的javascript可能有点难，但不是很多。

加载jQuery，并在单击复选框时编写要执行的函数。在该函数中是一个if语句，询问两件事，它是当前未选中的按钮，并且当前检查的按钮数量超过x个。如果两者都为真，则防止默认。

这是它应该是什么样子：

<input class="checkbox"></input>

$('.checkbox').click(function(){
    if ($(this:not(:checked)) && $(".checkbox:checked").length >= 3) {
       event.preventDefault()
    }
});

这应该阻止检查多于3个复选框。

Answer 3

很明显你想要一些客户端验证....使用javascript ....

有几种方法可以做到这一点......

像普通的javascript一样，你可以做类似

的事情

<script>
var predefined_limit = 3;
document.getElementByTagName('input').onchange = doSomething


function doSomething(){
    var counter=0;
    var elem = document.getElementByTagName('input');
    for(var i=0; i<elem.length; i++)
        if(elem.type=='checkbox' && elem.checked == true)
            counter ++;
    if(counter > predefined_limit){  
        this.checked = false;   
        alert('You can check only '+ predefined_limit + 'checkboxes')
    } 
}
</script>

然后你也可以使用jQuery或其他javascript框架，如其他答案建议

Answer 4

使用jQuery，您可以计算选中的复选框：

//Count number of checkboxes

$('input[name="type[]"]').on('click', function() {
    var nbcheck = $('input[name="type[]"]:checked').length;
    if(nbcheck > 2) {
        console.log('FORBIDEN!!!!');
        //Do stuffs you want -->
    }
});

允许用户仅选择一定数量的复选框

4 个答案: