자바 스크립트 작동 양식 예제 설명 (2 부)

저자：Eve Cole 업데이트 시간：2025-07-05 03:16:01

이전 기사에서는 JS 작동 양식 (2 부)의 예제 설명에 대한 관련 지식을 소개했습니다. 이 기사에서는 JavaScript 작동 양식 (2 부)의 예제 설명을 소개합니다. 특정 세부 사항은 다음과 같습니다.

1. 텍스트 필드

 <입력 유형 = "텍스트" />

--------------------------------------------------------------------------------------------------------------------------------

텍스트 필드의 값을 작동시킵니다

값 속성 세트 또는 값을 얻습니다

--------------------------------------------------------------------------------------------------------------------------------

2. 라디오 및 다중 선택 버튼

 <입력 유형 = "Radio" /> <입력 유형 = "CheckBox" />

--------------------------------------------------------------------------------------------------------------------------------

확인 된 반품 또는 단일 선택의 선택된 상태를 설정

선택된 false가 선택되지 않았습니다

값 속성은 선택한 값을 얻고 먼저 선택한 상태를 결정해야합니다.

--------------------------------------------------------------------------------------------------------------------------------

예 : ALL/NOT ALL/Reverse를 선택하십시오

1.png

1. 돔 구조

 <body> <form name = "myform"action = "#"method = "post"id = "form1"> <script type = "text /javaScript"> for (var i = 0; i <20; i ++) {docum 이름 = 'Radios'> All "); docum

2. 스크립트 스크립트

2.1 함수 호출 방법 사용

 <script type = "text/javaScript"> wind i = 0; i <a.length; i ++) {a [i] .checked = true;}} else if (b == 1) {for (var i = 0; i <a.length; i ++) {a [i] .checked = false;}} else if (b == 2) {for i = 0; i <a.length; i ++) {if (a [i] .checked) {a [i] .checked = false;} else {a [i] .checked = true;}}}} </script>

2.2 클로저에서 익명 기능을 만드는 방법 사용

 <script type = "text/javaScript"> wind i = 0; i <nums.length; i ++) {nums [i] .checked = true;}} else if (a == 1) {for (var i = 0; i <nums.length; i ++) {nums [i] .Checked = false;}} else if (a == 2) {for (var i = 0; i <nums.length; i ++) {if (nums [i] .checked) {nums [i] .checked = false;} else {nums [i] .checked = true;}}}}) (i);}} </script>

3. 상자를 당기십시오

 <form name = "myform"> <select name = "sels"> 옵션> Peking University </옵션> <plion> Chang'an University </옵션> <pluxt> Nanjing University> </select> </form>

--------------------------------------------------------------------------------------------------------------------------------

선택한 세트 또는 드롭 다운 상자의 선택한 상태로 돌아 가기

선택된 false가 선택되지 않았습니다

드롭 다운 상자에서 선택한 인덱스 번호를 선택하거나 반환합니다.

--------------------------------------------------------------------------------------------------------------------------------

예제 1 : Chang'an University를 선택하십시오

 <cript> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (가능) sels [1] .selected = true; </script>

또는

 <cript> var sels = document.myform.sels; // var sels = document.myform.sels.options; // (가능) sels.selectedIndex = 1; </script>

예제 2 : 단가 * 수량 = 총 가격

1.png

1. 돔 구조

 <body> <form name = "myform"action = "#"method = "post"id = "form1"> 단위 가격 : <입력 유형 = "text"name = "price"value = "200"> <count "> 수량 <옵션> 1 </옵션> <옵션> 2 </옵션> <옵션> 3 </select> 총 가격 : <입력 유형>

2. 스크립트 스크립트

 <script type = "text/javaScript"> wind }} </script>

4. 텍스트 영역

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

값은 텍스트 영역의 값을 반환하거나 설정합니다.

예 : 텍스트 영역에 입력 된 문자 길이를 동적으로 감지합니다.

1.png

1. 돔 구조 :

 <body> <div id = "content"> 총 20자를 입력하고 0을 입력 할 수 있고, 0을 입력하고, 20 개를 입력 할 수 있습니다 </div> <form name = "myform"action = "#"method = "post"id = "form1"> <textarea name = "info"cols = "60"rows = "7"> </textarea> </textarea> </textarea> </body>

2. 스크립트 스크립트 :

 <script type = "text/javaScript"> wind "+strs+"문자가 입력되었고 "+길이+"도 입력 할 수 있으며 "+(strs-length)+"s "도 입력 할 수 있습니다. i = 0; i <str.length; i ++) {if (str.charcodeat (i)> = 0 && str.charcodeat (i) <= 255) {// 영어 num ++;} else {// Chinese num+= 2;}} return num;}} </script>

5. 형태 확인

양식이 제출되면 OnSubmit 이벤트가 발생했습니다

--------------------------------------------------------------------------------------------------------------------------------

 <form name = "myform"action = "www.baidu.com"method = "post"onsubmit = "return check (this)"> </form> return false; // 형식 기본 동작을 차단합니다

--------------------------------------------------------------------------------------------------------------------------------

6. 방법을 제출하십시오

이 방법은 자동 제출을 구현하는 데 사용됩니다

이벤트 OnSubmit은 수동으로 만 제출하는 데 사용할 수 있습니다

위는 편집기 (2 부)가 소개 한 JavaScript 작동 양식의 예제입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!