php - 允许用户只选择一定数量的复选框

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 -->
    }
});