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

【问题标题】：JavaScript Validation For Checkbox, When Multiple checkbox selected from option list复选框的 JavaScript 验证，当从选项列表中选择多个复选框时
【发布时间】：2014-12-10 05:35:04
【问题描述】：

我想为 Checkbox 做 JavaScript 验证

如果复选框中的值没有被选中，它应该得到警报“请选择您知道的语言”

但如果用户从复选框列表中选择 2 种语言。我需要 2 种语言应该使用 JavaScript 获得警报。

我知道使用单个复选框，但不知道如何使用数组。

这是我的代码...

<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>

谢谢你，拉胡尔

【问题讨论】：

你的sn-p里没有代码，只有html
是的，sn-p 中没有代码。
如果您希望任何人帮助您，请向我们展示您迄今为止所做的尝试（明智的脚本）
@Kooilnc - 是的，我添加了我的脚本代码

标签： javascript html arrays checkbox listbox

【解决方案1】：

如果你想获取选中复选框值的列表..你可以使用这个..

$('#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
});

【讨论】：

我没有注意到问题中有jquery 标签。

【解决方案2】：

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

这是你为这两种情况重写的 sn-p（没有表格）：

(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>

【讨论】：