라디오 버튼, 체크박스, 드롭다운 메뉴를 설정하기 위해 DOM을 사용하는 Node.js 메소드_javascript 기술

이 기사의 예에서는 js가 DOM을 사용하여 라디오 버튼, 체크박스 및 드롭다운 메뉴를 설정하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

1. 라디오 버튼 설정

양식의 라디오 버튼은 사용자가 선택할 수 있는 개체 집합이지만 한 번에 하나만 선택할 수 있습니다. 각 항목에는 확인된 속성이 있습니다. 하나의 선택이 true이면 다른 항목은 false가 됩니다.

먼저 예시 게시:

코드 복사 코드는 다음과 같습니다.

카메라 브랜드:

캐논

Nikon

Sony

올림푸스

삼성

펜탁스

others

양식의 라디오 버튼은 사용자가 선택할 수 있는 개체 집합이지만 한 번에 하나만 선택할 수 있습니다. 각 항목에는 확인된 속성이 있습니다. 하나의 선택이 true이면 다른 항목은 false가 됩니다.
위의 코드에서 볼 수 있듯이 id와 name이 다릅니다. 라디오 버튼 그룹의 이름은 동일하며 하나만 선택됩니다. ID는 또는 기타 선택 효과에 바인딩됩니다.

코드 중 : 선택된 객체를 확인하는 코드는 (특정 항목의 체크된 값이 true일 경우 순회가 종료됩니다)

코드 복사 코드는 다음과 같습니다.

var oForm = document.forms["uForm1"];
var aChoices = oForm.camera;
for (i = 0; i If (aChoices[i].checked) //선택한 항목이 있으면 종료
휴식;
Alert("카메라 브랜드는 " aChoices[i].value);

2. 다중 선택 상자 설정

코드 복사 코드는 다음과 같습니다.

함수 체크박스() {

var str = document.getElementsByName("hobby");
var objarray = str.length;
var chestr = "";

for (j = 0; j If (str[j].checked == true) {
Chestr = str[j].value ",";
}
}
if (chestr == "") {
Alert("먼저 취미를 선택해주세요~!");
} 그 밖의 {
Alert("첫 번째 선택은:" chestr);
}
}

함수 변경 상자(액션) { var oForm = document.forms["myForm1"];

var oCheckBox = oForm.hobby;                                   for (var i = 0; i If (action oCheckBox[i].checked = !oCheckBox[i].checked;
          else //액션이 1이면 모두 선택되고, 0이면 모두 선택되지 않습니다
oCheckBox[i].checked = 작업;
}

좋아하는 일:

플레이볼

TV 시청

인터넷

읽는 중

여행

음악

others

양식>

체크박스 원칙은 체크된 속성의 부울 값을 사용하여 결정됩니다. 매개변수는 전부 선택이 아닌 모두 선택을 위해 0과 1의 형태로 전달될 수 있습니다.

3. 드롭다운 메뉴

드롭다운 메뉴는 일반적으로 사용되는 양식 요소입니다. 드롭다운 메뉴가 단일 선택인 경우 라디오 버튼 와 동일한 기능을 갖습니다. 드롭다운 메뉴가 다중 선택인 경우 multiple="multiple"인 경우, 그 기능은 체크박스와 동일하지만, 체크박스보다 훨씬 작은 공간을 차지합니다.

드롭다운 메뉴의 일반적인 속성:

속성	설명
길이	옵션 개수를 나타냅니다
선택	선택 여부를 나타내는 부울 값
SelectedIndex	선택한 옵션의 일련 번호, 옵션을 선택하지 않은 경우 -1 다중 선택 드롭다운 메뉴의 경우 첫 번째 선택한 옵션을 반환합니다. 0부터 시작하는 일련번호
텍스트	옵션 텍스트
가치	옵션값
유형	드롭다운 메뉴 유형으로, 단일 선택은 선택-1을 반환하고, 다중 선택은 선택-다중을 반환합니다
옵션	옵션 배열을 가져옵니다. 예: 드롭다운 메뉴 oSelectBox의 세 번째 항목을 나타내는 oSelectBox.options[2]

①드롭다운 메뉴에서 라디오 선택 값을 가져옵니다

코드 복사 코드는 다음과 같습니다.

<script><br /> 함수 checkSingle() {<br /> var oForm = document.forms["myForm1"];<br /> var oSelectBox = oForm.constellation;<br /> var iChoice = oSelectBox.selectedIndex; //선택한 항목 가져오기<br /> Alert("선택하셨습니다" oSelectBox.options[iChoice].text);<br /> }<br /> </script>

성좌:

양자리
황소자리
쌍둥이자리
암옵션>
라이온
처녀자리
Libra
전갈자리
Sagittarius
염소자리
물병
물고기자리
선택>

② 드롭다운 메뉴가 다중 선택인 경우 값은
입니다.

코드 복사 코드는 다음과 같습니다.

성좌:

양자리
황소자리
쌍둥이자리
암옵션>
라이온
처녀자리
Libra
전갈자리
Sagittarius
염소자리
물병
물고기자리
선택>

양식>

3. 보편적 가치(드롭다운 단일 선택 및 다중 선택)

코드 복사 코드는 다음과 같습니다.

<script><br /> 함수 getSelectValue(Box) {<br /> var oForm = document.forms["myForm1"];<br /> var oSelectBox = oForm.elements[Box]; //매개변수에 따라 드롭다운 메뉴 선택<br /> if (oSelectBox.type == "select-one") { //단일 선택인지 다중 선택인지 판단<br /> var iChoice = oSelectBox.selectedIndex; //선택한 항목 가져오기<br /> Alert("단일 선택, 선택하셨습니다." oSelectBox.options[iChoice].text);<br /> } 그 밖의 {<br /> var aChoices = new Array();<br /> //전체 드롭다운 메뉴 탐색<br /> for(var i = 0; i < oSelectBox.options.length; i )<br /> if (oSelectBox.options[i].selected) //선택된 경우<br /> aChoices.push(oSelectBox.options[i].text); //배열에 삽입<br /> Alert("여러 항목을 선택했습니다:" aChoices.join()) //결과 출력<br /> }<br /> }<br /> </script>

별자리:

양자리
황소자리
쌍둥이자리
암옵션>
라이온
처녀자리
Libra
전갈자리
Sagittarius
염소자리
물병
물고기자리
선택>

양자리
황소자리
쌍둥이자리
암옵션>
라이온
처녀자리
Libra
전갈자리
Sagittarius
염소자리
물병
물고기자리
선택>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.