ONCLICK을 사용하지 않고 JavaScript를 사용하여 라디오 버튼 선택에 따라 div 가시성을 제어합니다.

Question

부분적으로 유효한 HTML 코드가 있습니다. 라디오 버튼 선택에 따라 일부 텍스트 입력을 표시하려고 합니다. 저에게 작동하는 방식은 라디오 버튼을 누르면 다른 옵션이 숨겨지지만 화면이 처음 로드되면 3가지 옵션이 모두 표시된다는 것입니다. 클릭 시 함수가 호출되고 첫 번째 라디오 버튼의 선택된 옵션이 클릭을 구성하지 않기 때문이라고 가정합니다. 내가 만든 첫 번째 요청에만 표시되는 onload 이벤트 리스너를 만들어 보았지만 작동하지 않았습니다. 이게 내 코드야

<% layout('layouts/boilerplate') %>
    <h1>New Part</h1>
    <form action="/parts" method="POST" novalidate class="validated-form">
        <div>
            <label class="form-label" for="partnum">Part Number</label>
            <input  class="form-control" type="text" name="part[partnum]"  id="partnum" required>
        </div>
        <div>
            <label class="form-label" for="description">Part  Description</label>
            <input class="form-control" type="text" name="part[description]"   id="description" required>
        </div>
        <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="part[type]" id="btnradio1" value="Purchased" autocomplete="off"  onclick="show1()" checked >
            <label class="btn btn-outline-primary" for="btnradio1">Purchased</label>
          
            <input type="radio" class="btn-check" name="part[type]" id="btnradio2" value="Assembly" autocomplete="off" onclick="show2()">
            <label class="btn btn-outline-primary" for="btnradio2">Assembly</label>
          
            <input type="radio" class="btn-check" name="part[type]" id="btnradio3" value="Machined" autocomplete="off" onclick="show3()">
            <label class="btn btn-outline-primary" for="btnradio3">Machined</label>
          </div>
          <div>
            <h1 id="test1">Test 1</h1> 
          </div>
          <div>
            <h1 id="test2" >Test 2</h1>
          </div>
          <div id="machined">
            <h1 id="test3" >Test 3</h1>
            <div>
                <label class="form-label" for="material">Material</label>
                <input  class="form-control" type="text" name="part[material]"  id="material" required>
            </div>
          </div>
          <div><button>Add  Part</button></div>    
    </form>
    <a href="/parts">Back to your Parts</a>

    <script>  
function show1(){
  document.getElementById('test1').style.display ='block';
  document.getElementById('test2').style.display ='none';
  document.getElementById('machined').style.display ='none';
}
function show2(){
  document.getElementById('test1').style.display ='none';
  document.getElementById('test2').style.display ='block';
  document.getElementById('machined').style.display ='none';
}
function show3(){
  document.getElementById('test1').style.display ='none';
  document.getElementById('test2').style.display ='none';
  document.getElementById('machined').style.display ='block';
}
  
    </script>

Answer 1

조건부로 표시/숨겨야 하는 각 섹션을 "하위 양식"이라고 부르겠습니다. 다음과 같이 각 하위 양식에 CSS 클래스를 추가할 수 있습니다.

으아악

그런 다음 CSS 규칙을 도입하여 현재 선택한 옵션에 해당하는 하위 양식을 제외한 모든 하위 양식을 숨길 수 있습니다. CSS가 볼 수 있도록 이 선택을 추적하는 좋은 방법은 모든 옵션(예:

)을 포함하는 요소의 데이터 속성으로 보는 것입니다. 초기 값에 따라 처음에 표시되는 하위 양식이 결정됩니다.

으아악

...그리고 해당 스타일...

으아악

이 모든 것을 하나로 묶기 위해 JS 함수를 만들어 데이터 속성을 업데이트할 수 있습니다. 페이지(또는 양식 내에서도)에 여러 하위 양식 세트가 있을 수 있으므로 업데이트할 선택 항목을 결정하는 것이 유용합니다.

으아악 으아악

추가 옵션이 필요한 경우 추가 subform CSS 类；如果您需要多组子表单，您可以添加它们，并确保使用具有唯一 id 별도의 HTML 요소를 추가하여 모든 하위 양식을 포함할 수 있습니다.

작업 예제를 보려면 전체 코드 조각을 확인하세요.

으아악 으아악 으아악