Jquery Checkbox Input Validation

Question

I have the following checkbox

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

Now, I want to let my users select minimum three and maximum three options from the above check box. Breaking of any of the rules would give a message.

Would you please kindly help me how to do that with Jquery?

Thanks in Advance

Why is the name of the checkbox "compare[]"? Why the need for the brackets? I hope you don't think that by adding brackets to the name of an input that it'll make multiple inputs... — Naftuli Kay
– Naftuli Kay, Commented Dec 14, 2011 at 2:33

uadnal · Accepted Answer · 2011-12-07 13:05:59Z

2

Here is a 1 solution

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

edited Dec 7, 2011 at 13:05

answered Dec 7, 2011 at 1:25

uadnal

11.5k2 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

black_belt Over a year ago

Thank you Trevor for you reply. Your script is not working, may be because my fieldname is-- name="compare[]"

uadnal Over a year ago

Well, change the name or use a different selector. Either way, this is your solution. You may need to alter some things, but it does work. See my edit.

Klemen Tusar · Accepted Answer · 2011-12-07 01:06:18Z

0

Try this plugin: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

answered Dec 7, 2011 at 1:06

Klemen Tusar

9,7494 gold badges36 silver badges28 bronze badges

Comments

Naftuli Kay · Accepted Answer · 2011-12-14 02:36:51Z

0

You can loop over your checkbox's using jQuery.each(), checking for checked items and adding checks to a count. Then if the count is not equal to 3 you can output the validation error message.

$(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");

});
});

edited Dec 14, 2011 at 2:36

Naftuli Kay

92.6k108 gold badges290 silver badges432 bronze badges

answered Dec 7, 2011 at 1:13

Midio

363 bronze badges

2 Comments

black_belt Over a year ago

Thank you for your reply. I followed the link that you gave and I tried to understand the example given there, but as it turned out I have no clue what they are saying . Would you please kindly explain me how to do this when your fieldname is like-- fieldname[] ?? Thanks :)

Midio Over a year ago

Code example with comments now included

Collectives™ on Stack Overflow

Jquery Checkbox Input Validation

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related