suchen

Heim >Web-Frontend >js-Tutorial >js klickt auf das Textfeld, um die auswählbaren checkbox_javascript-Fähigkeiten anzuzeigen

js klickt auf das Textfeld, um die auswählbaren checkbox_javascript-Fähigkeiten anzuzeigen

WBOY
WBOYOriginal
2016-05-16 15:16:212163Durchsuche

Dieser Artikel enthält ein Codebeispiel. Wenn Sie auf das Textfeld klicken, wird ein Dropdown-Kontrollkästchen angezeigt, um den Wert in das Textfeld zu schreiben. Es ist einfach, kann aber als Beispiel verwendet werden, um den Lernenden das Verständnis und die Erweiterung zu erleichtern.
Der Code lautet wie folgt:

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

Der obige Code erfüllt unsere Anforderungen. Hier finden Sie eine Einführung in seinen Implementierungsprozess.
Codekommentare:
1.$(function(){}), Führen Sie den Code in der Funktion aus, wenn die Dokumentstruktur vollständig geladen ist.
2.var position=$("#xx").offset(), ruft den Offset des Textfelds relativ zum Dokumentdokument ab, die Funktion offset() gibt ein Objekt zurück Dieses Objekt enthält zwei Attribute links und oben, die den horizontalen bzw. vertikalen Versatz relativ zum Dokument darstellen.
3.$("#div1").offset({top:position.top 22,left:position.left}), Legen Sie den relativen Dokumentversatz des Popups fest Drop-Down-Menü-Container Der Verschiebungsbetrag, der erste plus 22, soll unterhalb des Textfelds angezeigt werden.
4.$("#xx").click(function(){$("#NG").toggleClass("open");}), ist für die registriert Klicken Sie im Textfeld auf die Ereignishandlerfunktion und klicken Sie darauf, um die Stilklasse zu öffnen, zu löschen und hinzuzufügen, dh um die Anzeige und Ausblendung des Dropdown-Menüs festzulegen.
5.$("#div1 input[name=ng]").click(function(){ }), Registrieren Sie die Klickereignisverarbeitung für das Textfeld, dessen Namensattributwert ist ng-Funktion.
6.var arr=new Array(), erstellt ein Array zum Speichern des Werts des ausgewählten Kontrollkästchens.
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),Speichern Sie den Wert des ausgewählten Kontrollkästchens in einem Array.
8.$("#xx").val(arr.join(","));, Verketten Sie die Array-Elemente zu einer Zeichenfolge und schreiben Sie sie in das Textfeld.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So zeigen Sie die Daten der letzten Woche und des letzten Monats in javascript_javascript skills anNächster Artikel：So zeigen Sie die Daten der letzten Woche und des letzten Monats in javascript_javascript skills an

In Verbindung stehende Artikel

Mehr sehen