HTML DOM 입력 라디오 이름 속성

<시간/>

HTML DOM 입력 라디오 이름 속성은 입력 라디오 필드의 이름 속성을 설정하거나 반환하는 데 사용됩니다. name 속성은 양식 데이터가 서버에 제출된 후 식별하는 데 도움이 됩니다. JavaScript는 name 속성을 사용하여 나중에 조작할 양식 요소를 참조할 수도 있습니다.

구문

다음은 −

의 구문입니다.

이름 속성을 설정합니다.

radioObject.name = name

여기서 name은 라디오 버튼의 이름을 지정하기 위한 것입니다.

예시

라디오 이름 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<h1>Input radio name Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>
<p>Change the name of the above radio button by clicking the below button</p>
<button type=”button” onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
   function changeName() {
      document.getElementById("Orange").name ="colors" ;
      document.getElementById("Sample").innerHTML = "Radio button name is now colors";
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 라디오 이름 속성

이름 변경 버튼을 클릭하면 -

HTML DOM 입력 라디오 이름 속성

위의 예에서 -

먼저 type=”radio”, name=”fruits”, id=”Orange” −

형식의 입력 요소를 생성했습니다.

<form>
FRUIT:
<input type="radio" name="fruits" id="Orange">Orange
</form>

그런 다음 사용자가 클릭할 때 changeName() 메서드를 실행하는 CHANGE NAME 버튼을 만들었습니다.

<button type=”button” onclick="changeName()">CHANGE NAME</button>

changeName() 메서드는 getElementById() 메서드를 사용하여 라디오 유형의 입력 필드를 가져오고 이름 속성 값을 "colors"로 설정합니다. 이 변경 사항은 ID가 "Sample"인 단락에 반영되고 innerHTML 속성을 사용하여 의도한 텍스트를 표시합니다 -

function changeName() {
   document.getElementById("Orange").name ="colors" ;
   document.getElementById("Sample").innerHTML = "Radio button name is now colors";
}