How to validate different names of checkboxes using javascript or jquery

Question

Could you help me how to validate different names of checkboxes at a time. It means i have a different levels of users. User select at least one Role. How to validate the checkboxes? Here my code like this

<input type="checkbox" name="is_admin" id="is_admin"/>
<input type="checkbox" name="is_marketing" id="is_marketing"/>
<input type="checkbox" name="is_school_admin" id="is_school_admin"/>
<input type="checkbox" name="is_trainer" id="is_trainer"/>
<input type="checkbox" name="is_coordinator" id="is_coordinator"/>

Like this my html Form is there. In this roles user select atleast one role. Please help me how to validate using java script or jquery. Thanks in advance

you can use :checkbox selector

Pavlo
– Pavlo

2014-02-19 12:30:19 +00:00
Commented Feb 19, 2014 at 12:30 — Pavlo
– Pavlo, Commented Feb 19, 2014 at 12:30

Arun P Johny · Accepted Answer · 2014-02-19 12:29:40Z

2

Add a class to all checkboxes

<input type="checkbox" class="usertype" name="is_admin" id="is_admin"/>
<input type="checkbox" class="usertype" name="is_marketing" id="is_marketing"/>
<input type="checkbox" class="usertype" name="is_school_admin" id="is_school_admin"/>
<input type="checkbox" class="usertype" name="is_trainer" id="is_trainer"/>
<input type="checkbox" class="usertype" name="is_coordinator" id="is_coordinator"/>

then use class selector to select those checkboxes and use .is() and :checked-selector to check whether atleast one of them is checked

if(!$('input.usertype').is(':checked')){
    alert('select atleast one user type')
}

answered Feb 19, 2014 at 12:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Rob Schmuecker · Accepted Answer · 2014-02-19 12:38:44Z

0

Here you can see it loop through all and display the value of checked in a separate output html element. http://jsfiddle.net/Np6aY/

HTML:

<input type="checkbox" name="is_admin" id="is_admin" />
<input type="checkbox" name="is_marketing" id="is_marketing" />
<input type="checkbox" name="is_school_admin" id="is_school_admin" />
<input type="checkbox" name="is_trainer" id="is_trainer" />
<input type="checkbox" name="is_coordinator" id="is_coordinator" />
<input type="button" id="getValButton" value="Get Values">
<div class="checkboxOutput"></div>

Javascript:

$('#getValButton').on('click', function () {
    var outputText = '';
    $('input[type=checkbox]').each(function (index, el) {
        outputText += $(el).attr('name') + ': ' + $(el).is(":checked") + '<br>';
    });
    $('.checkboxOutput').html(outputText);
});

answered Feb 19, 2014 at 12:38

Rob Schmuecker

8,9642 gold badges21 silver badges34 bronze badges

1 Comment

Rob Schmuecker Over a year ago

After having seen @Arun P Johny's answer I think I may have misread the question. Keeping it here for you to decide!

Collectives™ on Stack Overflow

How to validate different names of checkboxes using javascript or jquery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related