checkbox-checked

Validate HTML Checkbox And Radio using jQuery

CheckBox

HTML checkbox list is slightly different. The main problem is that it can’t be accessed using ID because every checkbox will have different ID. But they share one common attribute which is “name“. So while accessing checkboxes in jQuery, need to use “name” attribute.

Let’s declare a HTML checkboxlist.

<input type="checkbox" name="technologies" value="jQuery" /> jQuery <br/>
<input type="checkbox" name="technologies" value="JavaScript" />JavaScript <br/>
<input type="checkbox" name="technologies" value="Prototype" /> Prototype<br/>
<input type="checkbox" name="technologies" value="Dojo" /> Dojo<br/>
<input type="checkbox" name="technologies" value="Mootools" /> Mootools <br/>

As you can see there are 5 checkboxes and the validation would be to select at least 3 technologies. And on click of button, validate the checkboxlist. To find out, how many checkboxes are checked, use length property to find out.

$(“input[name=’technologies’]:checked”).length; will give count of checked checkboxes out of the list.

$(document).ready(function() {
    $('#btnSubmit').on('click', function(e) {
        var cnt = $("input[name='technologies']:checked").length;
        if (cnt < 3)
        {
            alert('Select at least 3 technologies');
            e.preventDefault();
        }
        else
            alert('Well Done!!!!');
    });
});

Radio Button

Let’s declare a HTML checkboxlist.

<input type="radio" name="technologies" value="jQuery" /> jQuery <br/>
<input type="radio" name="technologies" value="JavaScript" />JavaScript <br/>
<input type="radio" name="technologies" value="Prototype" /> Prototype<br/>
<input type="radio" name="technologies" value="Dojo" /> Dojo<br/>
<input type="radio" name="technologies" value="Mootools" /> Mootools <br/>

To check in Jquery there are having method shown below:

var radio_buttons = $("input[name='technologies']");
if( radio_buttons.filter(':checked').length == 0){
// None checked
} else {
// If you need to use the result you can do so without
// another (costly) jQuery selector call:
var val = radio_buttons.val();
}

OR

$("input:radio[name='html_radio']").is(":checked")

 

it return true or false.

Related Posts


One thought on “Validate HTML Checkbox And Radio using jQuery

  1. followback

    Excellent post, very informative. I’m wondering why the opposite specialists of this sector don’t realize this. You should continue your writing. I am sure, you’ve a great readers’ base already!|What’s Happening i am new to this, I stumbled upon this I’ve found It positively useful and it has aided me out loads. I am hoping to contribute & help other users like its aided me. Good job.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*