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

집

웹 프론트엔드

JS 튜토리얼

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

May 16, 2016 pm 03:16 PM

js 체크박스 텍스트 상자

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

&lt;html&gt;
&lt;head&gt;
&lt;meta charset="gb2312"&gt;
&lt;title&gt;js点击文本框弹出可选择的checkbox复选框&lt;/title&gt;
&lt;style type="text/css"&gt;
#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;
}
&lt;/style&gt;
&lt;script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt; 
$(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(",")); 
 }) 
}) 
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="div"&gt;
 &lt;div align="center" id="div2" &gt;
  &lt;form id="form1"&gt;
   &lt;input type="text" readonly="readonly" id="xx"/&gt;
   &lt;input type="submit" value="查询"/&gt;
  &lt;/form&gt;
 &lt;/div&gt;
 &lt;div id="div1"&gt;
  &lt;ul class="close" id="NG" &gt;
   &lt;li&gt;&lt;input type="checkbox" name="ng" value=1 /&gt;1&lt;/li&gt;
   &lt;li&gt;&lt;input type="checkbox" name="ng" value=2 /&gt;2&lt;/li&gt;
   &lt;li&gt;&lt;input type="checkbox" name="ng" value=3 /&gt;3&lt;/li&gt;
  &lt;/ul&gt;
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

위 코드는 우리의 요구 사항을 충족합니다. 구현 프로세스를 소개합니다.
코드 주석:
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(","));, 배열 요소를 문자열로 연결하고 텍스트 상자에 씁니다.