JavaScript de Validation De Case à cocher, Lorsque Plusieurs case sélectionnée à partir de la liste des options

Je veux faire une validation JavaScript pour la Case

Si la Valeur de Case à cocher n'est pas sélectionnée, il doit obtenir de l'alerte "s'il vous Plaît Sélectionnez les Langues que Vous Connaissez"

Mais si l'utilisateur de sélectionner les 2 Langues à partir d'une liste de case à cocher. J'ai besoin de 2 langues devrait obtenir d'alerte à l'aide de JavaScript.

Ce que je sais faire avec une seule case, mais pas de trouver comment le faire en utilisant un tableau.

Voici mon Code...

JS:

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

HTML:

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

Merci,
Rahul

  • Il n'y a pas de code dans votre extrait de code, html uniquement
  • oui il n'y a pas de code extrait.
  • si vous voulez quelqu'un pour vous aider, nous montrer ce que vous avez essayé jusqu'à présent (script sage)
  • oui j'ai ajouté mon code de script
InformationsquelleAutor Rahul Barge | 2014-10-15
  1. 1

    Si vous souhaitez obtenir la liste de case à cocher valeurs.. vous pouvez utiliser cette..

    $('#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
});
    • Je n'ai pas remarqué une jquery balise dans la question.
    InformationsquelleAutor shiva
  2. 0

    Si vous avez seulement besoin d'une valeur sélectionnée, il est plus facile d'utiliser un radio le type d'entrée. Avec elle, vous pouvez trouver la valeur sélectionnée à l'aide d'un querySelector (voir SOCIÉTÉ). Pour plusieurs langues, vous pouvez également utiliser querySelectorAll, convertir ses résultats à un Array et l'utilisation Array.map (voir SOCIÉTÉ) pour cartographier les résultats dans un Array des valeurs de l'coché des cases à cocher.

    Voici l'extrait de code réécrit pour les deux cas (sans forme):

    JS:

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

    HTML:

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

    InformationsquelleAutor KooiInc