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()
		{
        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代码与上面相同。

Answer 1

只有选中radiosChecked复选框时，只需修改true功能即可返回Yes。

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

你可以只使用CSS，不使用JS：

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript - 不反转显示/隐藏

2 个答案: