复选框的 JavaScript 验证，当从选项列表中选择多个复选框时

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

提问by Rahul Barge

I want to do JavaScript validation for Checkbox

我想对 Checkbox 进行 JavaScript 验证

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.

但是，如果用户从复选框列表中选择 2 种语言。我需要 2 种语言应该使用 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

谢谢你，拉胡尔

回答by shiva

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

回答by KooiInc

If you only need one selected value, it's easier to use a radioinput 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 Arrayand use Array.map(see MDN) to map the results into an Arrayof the values of the checked checkboxes.

如果您只需要一个选定的值，使用radio输入类型会更容易。有了它，您可以使用 a 找到选定的值querySelector（请参阅MDN）。对于多种语言，您还可以使用 querySelectorAll，将其结果转换为 anArray并使用Array.map（参见MDN）将结果映射到Array选中复选框的值中。

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>