Javascript - 不反转显示/隐藏

Javascript - Not Reversing the show/hide

本文关键字：显示 隐藏 Javascript      更新时间：2023-09-26

我创建了一个小提琴

希望用户点击"是"并显示#字段，然后单击"否"将其隐藏。我是否需要"否"上的另一个功能来执行此操作？

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">

好的，现在我在验证时遇到了这个问题。小提琴2显示/隐藏有效，但我无法验证以检查他们在点击"是"后是否输入了数据

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

我试图更改输入标签以区分是/否，但这破坏了显示/隐藏

HTML 代码与上述相同。

只需修改 radiosChecked 函数，仅当选中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。因此，切换不会发生。

你可以只用CSS来做，不用JS：

#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>

相关文章：