js et jquery valident respectivement les boutons radio, les cases à cocher et les listes déroulantes_compétences javascript-js tutoriel-php.cn

js et jquery valident respectivement les boutons radio, les cases à cocher et les listes déroulantes_compétences javascript

WBOY

Libérer： 2016-05-16 15:25:13

original

1678 Les gens l'ont consulté

Cet article présente respectivement la vérification js et jQuery de la radio, de la case à cocher et de la liste déroulante (sélectionner). Il est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant
. (1). Parlons d'abord de la radio. La radio et la case à cocher ont toutes deux le même nom et plusieurs valeurs. Lors de l'obtention de la valeur radio, nous ne pouvons pas suivre la méthode box.value ordinaire, mais pour déterminer laquelle. est sélectionné.

La vérification JS consiste à utiliser getElementsByName() pour obtenir le tableau
le code js est le suivant :

 <script>
 function test(){
  var sex = document.getElementsByName("sex");
  var flag = 0;
  for (var i=0;i<sex.length;i++)
  {
  if (sex.item(i).checked == true)
  {
   flag = 1;
   break;
  }
  }
  if (!flag)
  {
  alert("请选择性别");
  }
 }
 </script>
  <input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女
  <input type="button" id="btn" value="提交" onclick="test()">

Copier après la connexion

C'est beaucoup plus simple d'utiliser jQuery pour vérifier. Vous pouvez écrire moins et faire plus, haha :

<script src="jquery-1.7.1.min.js"></script>
 <script>
$(document).ready(function(){
$("#btn").click(function(){
if ($(":radio:checked").length == 0)
{
alert("你的性别未选择");
}
});
});
 </script>
  <input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="f">女
  <input type="button" id="btn" value="提交">

Copier après la connexion

(2) Case à cocher, Il n'est vraiment pas nécessaire d'en parler, car la case à cocher et le bouton radio sont exactement les mêmes. Changez simplement la radio dans le script ci-dessus en case à cocher et tout ira bien. .

(3) Liste déroulante (sélectionner)
Utilisez la vérification js, le code js :

<script>
function test(){
var sex = document.getElementById("sex").value;
if (!sex)
{
alert("你的性别未选择");
}
}
 </script>
  <select id="sex">
<option value="">--请选择性别--</option>
<option value="m">男</option>
<option value="f">女</option>
  </select>
  <input type="button" id="btn" value="提交" onclick="test()">

Copier après la connexion

Valider à l'aide de jQuery :

 <script src="jquery-1.7.1.min.js"></script>
 <script>
$(document).ready(function(){
$("#btn").click(function(){
if ($("#sex").val() == '')
{
alert("你的性别未选择");
}
});
});
 </script>
  <select id="sex">
<option value="">--请选择性别--</option>
<option value="m">男</option>
<option value="f">女</option>
  </select>
  <input type="button" id="btn" value="提交">

Copier après la connexion

Ce qui précède est le code pour valider les boutons radio, les cases à cocher et les listes déroulantes avec js et jquery respectivement. Il est introduit en fonction de la difficulté. J'espère qu'il sera utile à l'apprentissage de chacun.