recherche

Maison >interface Web >js tutoriel >js clique sur la zone de texte pour faire apparaître les compétences sélectionnables checkbox_javascript

js clique sur la zone de texte pour faire apparaître les compétences sélectionnables checkbox_javascript

WBOY
WBOYoriginal
2016-05-16 15:16:212162parcourir

Cet article partage un exemple de code. Lorsque vous cliquez sur la zone de texte, une case à cocher déroulante apparaîtra. La sélection de la case écrira la valeur dans la zone de texte. L'effet dans les applications réelles peut ne pas être aussi simple. C'est simple, mais cela peut servir d'exemple pour faciliter la compréhension et l'expansion des apprenants.
Le code est le suivant :

<html>
<head>
<meta charset="gb2312">
<title>js点击文本框弹出可选择的checkbox复选框</title>
<style type="text/css">
#div{
 margin-bottom:10px;
 position:relative;
}
#div1{
 width:153px;
 padding-top:0px;
 padding-left:0px;
 position:absolute;
}
#div1 ul{
 margin-top:0px;
 padding-left:0px;
 background-color:#ccc;
 list-style:none;
}
#div1 ul li{
 padding-left:0px;
}
#div1 ul li input{
 margin-left:15px;
}
.close{
 display:none;
}
.open{
 display:block;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 var position=$("#xx").offset(); 
 $("#div1").offset({ 
  top:position.top+22,
  left:position.left
 }); 
 $("#xx").click(function(){ 
  $("#NG").toggleClass("open"); 
 });
 $("#div1 input[name=ng]").click(function(){ 
  var arr=new Array(); 
  $("input[name=ng]:checked").each(function(key,value){
   arr[key]=$(value).val();
  }); 
  $("#xx").val(arr.join(",")); 
 }) 
}) 
</script>
</head>
<body>
<div id="div">
 <div align="center" id="div2" >
  <form id="form1">
   <input type="text" readonly="readonly" id="xx"/>
   <input type="submit" value="查询"/>
  </form>
 </div>
 <div id="div1">
  <ul class="close" id="NG" >
   <li><input type="checkbox" name="ng" value=1 />1</li>
   <li><input type="checkbox" name="ng" value=2 />2</li>
   <li><input type="checkbox" name="ng" value=3 />3</li>
  </ul>
 </div>
</div>
</body>
</html>

Le code ci-dessus répond à nos exigences. Voici une introduction à son processus de mise en œuvre.
Commentaires du code :
1.$(function(){}), Exécutez le code dans la fonction lorsque la structure du document est complètement chargée.
2.var position=$("#xx").offset(), récupère le décalage de la zone de texte par rapport au document, la fonction offset() renvoie un objet , cet objet contient deux attributs left et top, qui représentent respectivement les décalages horizontal et vertical par rapport au document.
3.$("#div1").offset({top:position.top 22,left:position.left}), Définir le décalage relatif du document de la fenêtre contextuelle conteneur de menu déroulant Le montant du décalage, le premier plus 22 sert à le faire apparaître sous la zone de texte.
4.$("#xx").click(function(){$("#NG").toggleClass("open");}), est enregistré pour le zone de texte Cliquez sur la fonction du gestionnaire d'événements, cliquez dessus pour ouvrir la classe de style pour la supprimer et l'ajouter, c'est-à-dire pour définir l'affichage et le masquage du menu déroulant.
5.$("#div1 input[name=ng]").click(function(){ }), Enregistrez le traitement des événements de clic pour la zone de texte dont la valeur d'attribut de nom est fonction ng.
6.var arr=new Array(), crée un tableau pour stocker la valeur de la case à cocher sélectionnée.
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),Enregistrez la valeur de la case à cocher sélectionnée dans un tableau.
8.$("#xx").val(arr.join(","));, Concaténez les éléments du tableau dans une chaîne et écrivez-la dans la zone de texte.

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment afficher les dates de la semaine dernière et du mois dernier dans les compétences javascript_javascriptArticle suivant：Comment afficher les dates de la semaine dernière et du mois dernier dans les compétences javascript_javascript

Articles Liés

Voir plus