js clicks on the text box to pop up the selectable checkbox

js clicks on the text box to pop up the selectable checkbox_javascript skills

WBOY

Release： 2016-05-16 15:16:21

Original

2152 people have browsed it

This article shares a code example. When you click on the text box, a drop-down checkbox will pop up. Selecting the checkbox will write the value into the text box. The effect in actual applications may not be so straightforward. It's simple, but it can be used as an example to facilitate learners' understanding and expansion.
The code is as follows:

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

Copy after login

The above code achieves our requirements. Here is an introduction to its implementation process.
Code comments:
1.$(function(){}), When the document structure is completely loaded, execute the code in the function.
2.var position=$("#xx").offset(), gets the offset of the text box relative to the document document, the offset() function returns an object , this object contains two attributes left and top, which represent the horizontal and vertical offsets relative to the document respectively.
3.$("#div1").offset({top:position.top+22,left:position.left}), Set the relative document of the pop-up drop-down menu container Offset, add 22 to the first one to make it appear below the text box.
4.$("#xx").click(function(){$("#NG").toggleClass("open");}), is registered for the text box Click event handler function, click it to switch the style class open to delete and add, that is, to set the display and hiding of the drop-down menu.
5.$("#div1 input[name=ng]").click(function(){ }), Register click event processing for the text box whose name attribute value is ng function.
6.var arr=new Array(), creates an array to store the value of the selected checkbox.
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),Save the value of the selected check box into an array.
8.$("#xx").val(arr.join(","));, Concatenate the array elements into a string and write it into the text box.

I hope this article will be helpful to everyone learning JavaScript programming.