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

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

May 16, 2016 pm 03:16 PM
js 체크박스 텍스트 상자

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

<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(","));, 배열 요소를 문자열로 연결하고 텍스트 상자에 씁니다.

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 Nov 21, 2023 am 10:00 AM

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.

jQuery를 사용하여 체크박스 선택 상태의 실시간 업데이트 구현 jQuery를 사용하여 체크박스 선택 상태의 실시간 업데이트 구현 Feb 23, 2024 pm 03:45 PM

jQuery를 사용하여 체크박스 선택 상태의 실시간 업데이트 구현

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법

JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법 Nov 21, 2023 am 10:53 AM

JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법

JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법 JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법 Nov 21, 2023 am 11:11 AM

JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법

See all articles