자바 스크립트 - 쇼/숨기기 반전하지

Question

나는 fiddle

은 사용자 히트를 '예'가 하시겠습니까 만들었으며는 # 필드를 보여주지하고이를 숨기기 위해 '더'했다. 이 작업을 수행하려면 '아니오'라는 또 다른 기능이 필요합니까? 좋아

var empNumber, radios; 
 

 
function showReqEmp() { 
 
    if (!radiosChecked()) { 
 
     empNumber.style.display = 'none'; 
 
    } else { 
 
     empNumber.style.display = 'block'; 
 
    } 
 
} 
 

 
function showReqEmp(id) { 
 
    var a = document.getElementById(id); 
 
    if (!radiosChecked()) 
 
     a.style.display = 'none'; 
 
    else 
 
     a.style.display = 'block'; 
 
} 
 

 
function radiosChecked() { 
 
    var radios = document.getElementsByName('returning_employee'); 
 
    for (var i = 0; i < radios.length; i++) 
 
    if (radios[i].checked) return true; 
 
    return false; 
 
} 
 
showReqEmp('requiredNum'); 
 
showReqEmp('requiredNumText');

<font color="Red">*</font>Returning Employee:</td> 
 
<input type="radio" name="returning_employee" value="Yes" onclick="showReqEmp('requiredNum'); showReqEmp('requiredNumText')">Yes 
 
<input type="radio" name="returning_employee" value="No" onclick="showReqEmp('requiredNumText'); showReqEmp('requiredNum')" />No 
 
<lable id="requiredNumText" style="display:none"><font color="Red">*</font>Employee Number:</lable> 
 
<lable id="requiredNum" style="display:none"> 
 
    <input type="text" id="employee_number" name="employee_number" placeholder="123456789">

그래서 지금은 검증이 문제 다 퉜다. Fiddle2 표시/숨기기 작동하지만 나는 그들이 내가 예를 다르게 입력 태그를 변경하는 것을 시도했다

var numberExp = /^[0-9\-]+$/; 
 
function validate() 
 
\t \t { 
 
     if(document.newempRequest.returning_employee.checked && !(document.newempRequest.employee_number.value.match(numberExp))) 
 
\t \t { 
 
\t \t alert("Please provide the employee number"); 
 
\t \t document.newempRequest.employee_number.focus(); 
 
\t \t return false; 
 
\t \t } 
 
     return true; 
 
\t \t }

'예'타격 후 데이터를 입력 한 경우 유효성 확인에 도착하지 못할/아니요, 그 /는 쇼/비 었음을 나타냅니다.

HTML 코드는 위와 동일합니다.

Answer 1

Yes 확인란을 선택한 경우에만 함수를 수정하여 true을 반환하십시오.

function radiosChecked() { 
    var radios = document.getElementsByName('returning_employee')[0]; 
    return radios.checked; 
} 

원래 코드 :

var radios = document.getElementsByName('returning_employee'); 
for (var i = 0; i < radios.length; i++) 
if (radios[i].checked) return true; 
return false; 

그룹의 체크 박스의 체크 경우에도 true을 반환합니다. 그러므로 토글 링은 일어나지 않을 것입니다.

Answer 2

당신은 JS없이 CSS 만, 그것을 할 수는 :

#requiredNum { 
 
    display: none; 
 
} 
 
#returning_employee_yes:checked ~ #requiredNum { 
 
    display: block; 
 
}

*Returning Employee: 
 

 
<input type="radio" name="returning_employee" 
 
     id="returning_employee_yes" value="Yes" /> 
 
<label for="returning_employee_yes">Yes</label> 
 

 
<input type="radio" name="returning_employee" 
 
     id="returning_employee_no" value="No" /> 
 
<label for="returning_employee_no">No</label> 
 

 
<label id="requiredNum"> 
 
    *Employee Number: 
 
    <input type="text" id="employee_number" 
 
     name="employee_number" placeholder="123456789" /> 
 
</label>