JavaScript Validation For Checkbox, When Multiple checkbox selected from option list

Question

I want to do JavaScript validation for Checkbox

If Value from Checkbox is not selected, it should get alert "Please Select Languages You Know"

But if user select 2 Languages from list of checkbox. I need that 2 languages should get alert using JavaScript.

I know to do with single checkbox, but not getting how to do using array.

Here is my Code...

 <script type="text/javascript"> function myFunction(form){ var i, chks = document.getElementsByName('lang[]'); for (i = 0; i < chks.length; i++){ if (chks[i].checked){ //Here how i should alert selected values return true; }else{ alert('No item selected'); return false; } } } </script> 

  <form name="registration" id="registration_form_id" action="" method="post" onsubmit="return myFunction(this)"> <div id="languageId"><label>Language : </label> <input type="checkbox" name="lang[]" value="english" >English</input> <input type="checkbox" name="lang[]" value="marathi">Marathi</input> <input type="checkbox" name="lang[]" value="hindi">Hindi</input> </div> <div id="submit1"><button type="submit">Submit</button></div><br/> </form> 

Thank You, Rahul

Answer 1

If you want to get the list of selected checkbox values.. you can use this..

$('#someButton').click(function() {
    var values= [];
    $('#MyDiv input:checked').each(function() {
        values.push(this.val);
    });
    // now values contains all of the values of checked checkboxes
    // do something with it
});

Answer 2

If you only need one selected value, it's easier to use a radio input type. With it, you can find the selected value using a querySelector (see MDN ). For multiple languages, you can also use querySelectorAll , convert its results to an Array and use Array.map (see MDN ) to map the results into an Array of the values of the checked checkboxes.

Here's your snippet rewritten for both cases (without a form):

 (function (d, w, undefined) { d.querySelector('#languageId button').addEventListener('click', doSubmit); d.querySelector('#multiLanguageId button').addEventListener('click', doSubmitMulti); var languageSelectorContainer = d.querySelector('#languageId'); var multiLanguageSelectorContainer = d.querySelector('#multiLanguageId'); function doSubmit() { var languageChecked = languageSelectorContainer .querySelector('[type=radio]:checked'); d.querySelector('#result').innerHTML = 'your selected language: <b>'+ (languageChecked ? languageChecked.value : 'not yet selected') + '</b>'; } function doSubmitMulti() { var languagesChecked = [].slice.call( multiLanguageSelectorContainer .querySelectorAll('[type=checkbox]:checked') ) .map(function (v){ return v.value; }); d.querySelector('#result').innerHTML = 'you selected these language(s): <b>'+ (languagesChecked.length ? languagesChecked.join(', ') : 'none yet selected') + '</b>'; } }(document, window)) 

 <div id="languageId">Pick your language: <input type="radio" name="lang[]" value="english">English <input type="radio" name="lang[]" value="marathi">Marathi <input type="radio" name="lang[]" value="hindi">Hindi <button>Submit</button> </div> <div id="multiLanguageId">Pick the languages you know: <input type="checkbox" name="mlang[]" value="english">English <input type="checkbox" name="mlang[]" value="marathi">Marathi <input type="checkbox" name="mlang[]" value="hindi">Hindi <button>Submit</button> </div> <div id="result"></div>