Question

我有以下复选框

<input type="checkbox" name="compare[]" value="<?php echo $product_id  ?>" />

现在，我想让我的用户从上面的复选框中选择最少三个和最多三个选项。打破任何规则都会给出一个信息。

请您帮助我如何使用Jquery做到这一点？

先谢谢

Answer 1

这是一个解决方案

var $chkbox = $('input[name=compare]');
$chkbox.click(function (e) {
    if ($chkbox.filter(':checked').length > 3) {
        e.target.checked = false;
    }
});

http://jsfiddle.net/H96nz/

var $chkbox = $('input[type="checkbox"]');

$chkbox.click(function (e) {
    if ($chkbox.filter(':checked').length > 3) {
        e.target.checked = false;
    }
});

Answer 2

试试这个插件：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 3

您可以使用jQuery.each()循环复选框，检查选中的项目并将检查添加到计数中。然后，如果计数不等于3，则可以输出验证错误消息。

$(function(){
$("#frm").submit(function(){
    var checkCount = 0;
    var min = 3;
    var max = 3;

    // iterate over checkbox's using jquery each()
    // use jquery's attribute contains selector ( http://api.jquery.com/attribute-contains-selector/ )
    // to grab the compare portion of the checkbox field name
    $("input[name*='compare']").each(function(k, v) {

    // increment check count when a checked checkbox is found
    if($(this).is(":checked"))
        checkCount++;
    });

    //validate checkbox count against predefined range
    if(checkCount < min || checkCount > max)
    {
        console.log("Checkbox Validation Failed");
        return false;
    }
    else
        console.log("Checkbox Validation Passed");

});
});

Jquery复选框输入验证

3 个答案: