Node.js는 텍스트 상자를 클릭하여 선택 가능한 checkbox_javascript 기술을 표시합니다.-JS 튜토리얼-php.cn

Node.js는 텍스트 상자를 클릭하여 선택 가능한 checkbox_javascript 기술을 표시합니다.

WBOY

풀어 주다： 2016-05-16 15:16:21

원래의

2105명이 탐색했습니다.

이 글에서는 텍스트 상자를 클릭하면 드롭다운 체크박스가 나타납니다. 체크박스를 선택하면 텍스트 상자에 값이 기록됩니다. 간단하지만 학습자의 이해와 확장을 돕기 위한 예시로 활용될 수 있습니다.
코드는 다음과 같습니다.

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

로그인 후 복사

위 코드는 우리의 요구 사항을 충족합니다. 구현 프로세스를 소개합니다.
코드 주석:
1.$(function(){}), 문서 구조가 완전히 로드되면 함수의 코드를 실행합니다.
2.var position=$("#xx").offset(), 은 문서 문서를 기준으로 텍스트 상자의 오프셋을 가져오고, offset() 함수는 객체를 반환합니다. , 이 개체에는 문서를 기준으로 각각 가로 및 세로 오프셋을 나타내는 두 개의 속성 left 및 top이 포함되어 있습니다.
3.$("#div1").offset({top:position.top+22,left:position.left}), 팝업 관련 문서 설정 드롭다운 메뉴 컨테이너 오프셋, 첫 번째 항목에 22를 추가하여 텍스트 상자 아래에 표시되도록 합니다.
4.$("#xx").click(function(){$("#NG").toggleClass("open");}), 이(가) 텍스트 상자 클릭 이벤트 핸들러 함수를 클릭하면 스타일 클래스 열기가 삭제 및 추가로 전환됩니다. 즉, 드롭다운 메뉴의 표시 및 숨기기를 설정합니다.
5.$("#div1 input[name=ng]").click(function(){ }), name 속성 값이 다음과 같은 텍스트 상자에 대한 클릭 이벤트 처리를 등록합니다. ng 함수.
6.var arr=new Array(), 는 선택된 체크박스의 값을 저장할 배열을 생성합니다.
7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),선택한 체크박스의 값을 배열로 저장합니다.
8.$("#xx").val(arr.join(","));, 배열 요소를 문자열로 연결하고 텍스트 상자에 씁니다.