Of Stack

js Click the text box to bring up the optional checkbox check box

  • 2020-12-18 01:45:12
  • OfStack

This article shares 1 code example, which can pop up the drop-down checkbox check box when you click on the text box, and then write the value into the text box if you select the check box. The effect may not be so straightforward in practical application, but it can be demonstrated as an example for learners to understand and expand.
The code is as follows: 


<html>
<head>
<meta charset="gb2312">
<title>js Click on the text box to bring up the option checkbox Check box </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=" The query "/>
  </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>

Above code to achieve our requirements, the following description of its implementation process.
Code comments:
1.$(function(){}), when the document structure is fully loaded before executing the code in the function.
var position=$("#xx").offset(), gets the offset of the text box relative to the document document. The offset() function returns an object that contains two attributes, left and top, representing the horizontal and vertical offsets relative to the document, respectively.
3.$("#div1").offset ({top: position.top +22,left: position.left}), sets the offset of the relative document of the pop-up drop-down menu container, the first addition is 22 to make it appear below the text box.
4.$("#xx").click(function(){$("#NG").toggleClass("open"); }), register the click event handler function for the text box, click it to toggle the style class open Delete and Add, which is to set the display and hide of the drop-down menu.
5.$("#div1 input[name=ng]").click(function(){}), registers the click event handler for the text box with ng as the value of name attribute.
6.var arr=new Array(), create an array to hold the value value of the checkbox check box.
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val(); }), stores the value of the checked check box in an array.
8.$("#xx").val(arr.join(",")); , which concatenates array elements into strings and writes them to the text box.

I hope this article has been helpful in learning javascript programming.

Related articles: