JS DOM을 사용하여 라디오 버튼, 확인란 및 드롭 다운 메뉴를 설정하는 방법

저자：Eve Cole 업데이트 시간：2025-06-15 07:48:02

이 기사에서는 JS의 DOM을 사용하여 라디오 버튼, 확인란 및 드롭 다운 메뉴를 설정하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.

1. 라디오 버튼을 설정하십시오

라디오 버튼은 <input type = "radio" /> 형식입니다. 사용자가 선택할 수있는 일련의 객체이지만 한 번에 하나만 선택할 수 있습니다. 각각은 점검 된 속성을 가지고 있으며, 하나는 그것을 ture로 선택하면 다른 사람은 거짓이됩니다.

먼저 예를 게시합시다.

다음과 같이 코드를 복사하십시오. <script type = "text/javaScript">

함수 getChoice () {

var oform = document.forms [ "uform1"];

var achoices = oform.camera;

for (i = 0; i <achoices.length; i ++) // 전체 단일 옵션 테이블을 전송합니다.

if (achoices [i] .Checked) // 선택한 항목이 발견되면 종료

부서지다;

경고 ( "카메라 브랜드는 :" + achoices [i] .Value);

}

함수 setChoice (inum) {

var oform = document.forms [ "uform1"];

oform.camera [inum] .checked = true;

}

</스크립트>

카메라 브랜드 :

<p>

<입력 유형 = "라디오"이름 = "카메라"id = "Canon"value = "Canon">

<label for = "canon"> canon </label>

</p>

<p>

<입력 유형 = "radio"name = "카메라"id = "Nikon"value = "Nikon">

<label for = "nikon"> nikon </label>

</p>

<p>

<입력 유형 = "radio"name = "카메라"id = "Sony"value = "Sony"Checked>

</p>

<p>

<입력 유형 = "Radio"name = "Camera"id = "Olympus"value = "Olympus">

<label for = "Olympus"> Olympus </label>

</p>

<p>

<입력 유형 = "radio"name = "카메라"id = "Samsung"value = "Samsung">

</p>

<p>

<입력 유형 = "Radio"name = "Camera"id = "Pentax"value = "Pentax">

<label for = "pentax"> pentax </label>

</p>

<p>

<label for = "Other"> Other </label>

</p>

<p>

<입력 유형 = "제출"이름 = "btnsubmit"id = "btnsubmit"value = "제출">

</p>

<p>

<입력 유형 = "버튼"value = "선택한 개체 감지"onclick = "getChoice ();">

<입력 유형 = "버튼"value = "canon으로 설정"onclick = "setchoice (0);">

</p>

</form>

위의 코드에서 ID와 이름이 다르고 라디오 버튼 세트에서 이름이 동일하며 하나만 선택한다는 것을 알 수 있습니다. ID는 <label> 또는 기타 옵션으로 바인딩됩니다.

코드 중 : 선택한 객체를 확인하는 코드는 (특정 항목의 chked 값이 ture 일 때 트래버스가 끝나는 경우)

코드 사본은 다음과 같습니다. var oform = document.forms [ "uform1"];

var achoices = oform.camera;

for (i = 0; i <achoices.length; i ++) // 전체 단일 옵션 테이블을 전송합니다.

if (achoices [i] .Checked) // 선택한 항목이 발견되면 종료

부서지다;

경고 ( "카메라 브랜드는 :" + achoices [i] .Value);

2. 여러 선택 상자를 설정하십시오

라디오 버튼과 달리 확인란 <input type = "Checkbox" />는 처리를 위해 동시에 선택할 수 있습니다. 사서함의 각 이메일 이전의 확인란은 일반적인 사용입니다.

다음과 같이 코드를 복사하십시오. <script type = "text/javaScript">

함수 checkbox () {

var str = document.getElementsByName ( "Hobby");

var objarray = str.length;

var chestr = "";

for (j = 0; j <objarray; j ++) {

if (str [j] .checked == true) {

chestr + = str [j] .Value + ",";

}

if (chest == "") {

Alert ( "취미를 먼저 선택하십시오 ~!");

} 또 다른 {

경고 ( "첫 번째 선택 :" + chestr);

}

함수 Changeboxes (action) {

var oform = document.forms [ "myform1"];

var ocheckbox = oform.hobby;

for (var i = 0; i <ocheckbox.length; i ++) // 각 옵션을 전송합니다.

if (action <0) // 역 선택

OCHECKBOX [i] .checked =! ocheckbox [i] .Checked;

else // 동작이 1 인 경우 모두를 선택하고 0 인 경우 모두를 선택하십시오.

ocheckbox [i] .checked = action;

}

</스크립트>

당신이하고 싶은 일 :

<p>

</p>

<p>

<입력 유형 = "CheckBox"name = "Hobby"id = "TV"value = "TV">

</p>

<p>

< "net"> 인터넷에서 <레이블 </label>

</p>

<p>

<label for = "book"> Reading </label>

</p>

<p>

</p>

<p>

<label for = "music"> music </label>

</p>

<p>

<label for = "Other"> Other </label>

</p>

<p>

<입력 유형 = "버튼"value = "모든 선택"onclick = "Changeboxes (1);" />

<입력 유형 = "버튼"value = "전혀 선택 없음"onclick = "Changeboxes (0);" />

<입력 유형 = "버튼"value = "anti-select"onclick = "Changeboxes (-1);" />

<입력 유형 = "버튼"value = "제출"onclick = "checkbox ()" />

</p>

</form>

확인란 원리는 확인 된 속성 부울 값을 사용하여 결정됩니다. 모든 및 불완전한 선택을 선택하면 0과 1의 형태로 매개 변수를 전달할 수 있습니다.

3. 풀다운 메뉴

드롭 다운 메뉴 <Select>는 일반적으로 사용되는 양식 요소입니다. 풀다운이 라디오를 선택할 수 있으면 라디오 버튼의 기능 <input type = "radio" />의 함수는 라디오 버튼 <input type = "radio" />의 함수와 동일합니다. 드롭 다운 메뉴가 다중 선택 가능하면 기능은 확인란과 동일하지만 점유 된 영역은 확인란보다 훨씬 작습니다.

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

재산	설명
길이	옵션 <옵션>을 나타냅니다
선택된	<emplity>가 선택되었는지 여부를 나타내는 부울 값
선택된 index	선택한 옵션의 일련 번호는 옵션을 선택하지 않으면 -1입니다. 다중 선택 드롭 다운 메뉴의 경우 선택한 첫 번째로 돌아갑니다. 시퀀스 번호는 0에서 시작합니다
텍스트	옵션 텍스트
값	옵션의 가치
유형	드롭 다운 메뉴 유형, 단일 선택 반환 Select-One, Multiple-Choice 리턴 Select-Multiple
옵션	드롭 다운 메뉴에서 Oselectbox의 세 번째 항목을 나타내는 Oselectbox.Options [2]와 같은 옵션 배열 가져옵니다.

①. 단일 선택 값을 얻으려면 메뉴를 뽑아 내십시오

다음과 같이 코드를 복사하십시오. <script language = "javaScript">

함수 checksingle () {

var oform = document.forms [ "myform1"];

var oselectbox = oform.stellation;

var ichoice = oselectbox.selectedIndex; // 선택한 항목을 얻습니다

ALERT ( "선택한" + OSELECTBOX.OPTIONS [ICHOICE] .TEXT);

}

</스크립트>

<label for = "Constellation"> Zodiac 표시 : </label>

<p>

<선택 ID = "Constellation"name = "Constellation">을 선택하십시오

<옵션 값 = "양식"selected = "selected"> 양자리 </옵션>

<옵션 값 = "Taurus"> taurus </옵션>

<옵션 값 = "gemini"> gemini </옵션>

<옵션 값 = "암"> 암 </옵션>

<옵션 값 = "leo"> lion </옵션>

<옵션 값 = "처녀 자리"> 처녀 자리 </옵션>

<옵션 값 = "libra"> libra </옵션>

<옵션 값 = "Scorpio"> Scorpio </옵션>

<옵션 값 = "궁수 자리"> 스노커 </옵션>

<옵션 값 = "염소 자리"> 염소 자리 </옵션>

<옵션 값 = "Aquarius"> Aquarius </옵션>

<옵션 값 = "PISCES"> 물고기 </옵션>

</선택>

</p>

<입력 유형 = "버튼"onclick = "Checksingle ()"value = "보기 옵션" />

</form>

②. 드롭 다운 메뉴가 다중 선택되면 값을 가져 가십시오

다음과 같이 코드를 복사하십시오. <script type = "text/javaScript">

함수 checkmultiple () {

var oform = document.forms [ "myform1"];

var oselectbox = oform.stellation;

var achoices = new Array ();

// 전체 드롭 다운 메뉴를 이동합니다

for (var i = 0; i <oselectbox.options.length; i ++)

if (oselectbox.options [i] .selected) // 선택한 경우

achoices.push (oselectbox.options [i] .text); // 배열로 누릅니다

ALERT ( "선택한 :" + achoices.join ()); // 출력 결과

}

</스크립트>

<label for = "Constellation"> Zodiac 표시 : </label>

<p>

<옵션 값 = "양자리"> 양자리 </옵션>

<옵션 값 = "Taurus"> taurus </옵션>

<옵션 값 = "gemini"> gemini </옵션>

<옵션 값 = "암"> 암 </옵션>

<옵션 값 = "leo"> lion </옵션>

<옵션 값 = "처녀 자리"> 처녀 자리 </옵션>

<옵션 값 = "libra"> libra </옵션>

<옵션 값 = "Scorpio"> Scorpio </옵션>

<옵션 값 = "궁수 자리"> 스노커 </옵션>

<옵션 값 = "염소 자리"> 염소 자리 </옵션>

<옵션 값 = "Aquarius"> Aquarius </옵션>

<옵션 값 = "PISCES"> 물고기 </옵션>

</선택>

</p>

</form>

③. 일반적인 가치 (단일 및 다중 선택을 끌어내는 것)

다음과 같이 코드를 복사하십시오. <script language = "javaScript">

함수 getSelectValue (box) {

var oform = document.forms [ "myform1"];

var oselectbox = oform.elements [box]; // 해당 선택 드롭 다운 메뉴는 매개 변수에 따라 선택됩니다.

if (oselectbox.type == "select-one") {// 단일 또는 객관식 여부를 판단합니다.

var ichoice = oselectbox.selectedIndex; // 선택한 항목을 얻습니다

ALERT ( "단일 선택, 선택한" + oselectbox.options [ichoice] .text);

} 또 다른 {

var achoices = new Array ();

// 전체 드롭 다운 메뉴를 이동합니다

for (var i = 0; i <oselectbox.options.length; i ++)

if (oselectbox.options [i] .selected) // 선택한 경우

achoices.push (oselectbox.options [i] .text); // 배열로 누릅니다

ALERT ( "객관식 선택," + achoices.join ()); // 출력 결과

}

</스크립트>

별자리:

<p>

<옵션 값 = "양식"selected = "selected"> 양자리 </옵션>

<옵션 값 = "Taurus"> taurus </옵션>

<옵션 값 = "gemini"> gemini </옵션>

<옵션 값 = "암"> 암 </옵션>

<옵션 값 = "leo"> lion </옵션>

<옵션 값 = "처녀 자리"> 처녀 자리 </옵션>

<옵션 값 = "libra"> libra </옵션>

<옵션 값 = "Scorpio"> Scorpio </옵션>

<옵션 값 = "궁수 자리"> 스노커 </옵션>

<옵션 값 = "염소 자리"> 염소 자리 </옵션>

<옵션 값 = "Aquarius"> Aquarius </옵션>

<옵션 값 = "PISCES"> 물고기 </옵션>

</선택>

<입력 유형 = "버튼"onclick = "getSelectValue ( 'constellation1')"value = "보기 옵션" />

</p>

<p>

<옵션 값 = "양자리"> 양자리 </옵션>

<옵션 값 = "Taurus"> taurus </옵션>

<옵션 값 = "gemini"> gemini </옵션>

<옵션 값 = "암"> 암 </옵션>

<옵션 값 = "leo"> lion </옵션>

<옵션 값 = "처녀 자리"> 처녀 자리 </옵션>

<옵션 값 = "libra"> libra </옵션>

<옵션 값 = "Scorpio"> Scorpio </옵션>

<옵션 값 = "궁수 자리"> 스노커 </옵션>

<옵션 값 = "염소 자리"> 염소 자리 </옵션>

<옵션 값 = "Aquarius"> Aquarius </옵션>

<옵션 값 = "PISCES"> 물고기 </옵션>

</선택>

<입력 유형 = "버튼"onclick = "getSelectValue ( 'constellation2')"value = "보기 옵션" />

</p>

</form>

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