html - JavaScript Validation For Checkbox, When Multiple checkbox selected from option list - Stack Overflow

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>

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

• javascript
• html
• arrays
• checkbox
• listbox

Share Improve this question Follow edited Oct 15, 2014 at 9:38 Rahul Barge asked Oct 15, 2014 at 8:07 Rahul BargeRahul Barge 7311 gold badge11 silver badge77 bronze badges 4

• 1 There is no code in your snippet, only html – KooiInc Commented Oct 15, 2014 at 8:11
• yes there is no code in snippet. – Rahul Barge Commented Oct 15, 2014 at 8:45
• if you want anyone to help you, show us what you've tried so far (script wise) – KooiInc Commented Oct 15, 2014 at 8:50
• @Kooilnc - yes i added my script code – Rahul Barge Commented Oct 15, 2014 at 9:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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
});

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>