Javascript 如何设置单击特定单选按钮时所需的选择表单?
如果这是一个愚蠢的问题,我很抱歉,但我有一个单选按钮的表格。 基本上是“是”和“否”按钮。我也有一个选择栏,但我希望它不会被视为提交表单所必需的,除非选择了单选按钮“是”。我使用的javascript涵盖了所有内容,除了这个特定实例。选择“是”单选按钮时,我需要使“选择”项成为必需项。我发布了html代码,但我不确定是否也需要javascript。如果是的话,我会编辑它Javascript 如何设置单击特定单选按钮时所需的选择表单?,javascript,html,dom,Javascript,Html,Dom,如果这是一个愚蠢的问题,我很抱歉,但我有一个单选按钮的表格。 基本上是“是”和“否”按钮。我也有一个选择栏,但我希望它不会被视为提交表单所必需的,除非选择了单选按钮“是”。我使用的javascript涵盖了所有内容,除了这个特定实例。选择“是”单选按钮时,我需要使“选择”项成为必需项。我发布了html代码,但我不确定是否也需要javascript。如果是的话,我会编辑它 <label for="yes"><input type="radio" id="yes" name="
<label for="yes"><input type="radio" id="yes" name="refee" value="yes" class="radio">Yes</label>
<label for="no"><input type="radio" id="no" name="refee" value="no" class="radio">No</label>
<<label for="Age range">Age range: </label>
<select id="refT">
<option selected="selected">20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>60+</option>
</select>
<br><input type="submit" value="Submit"><br>
<br><input type="reset" value="Reset"><br>
</form>
window.onload = initForm;
function initForm() {
document.forms[0].onsubmit = validForm;
document.getElementById("sunroof").onclick = doorSet;
}
function validForm() {
var allGood = true;
var allTags = document.forms[0].getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
if (allGood && !isNum(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isZip":
if (allGood && !isZip(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value == document.getElementById(otherFieldID).value);
}
function radioPicked(radioName) {
var radioSet = document.forms[0][radioName];
if (radioSet) {
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
}
return false;
}
function isNum(passedVal) {
if (passedVal == "") {
return false;
}
for (var k=0; k<passedVal.length; k++) {
if (passedVal.charAt(k) < "0") {
return false;
}
if (passedVal.charAt(k) > "9") {
return false;
}
}
return true;
}
function isZip(inZip) {
if (inZip == "") {
return true;
}
return (isNum(inZip));
}
function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}
}
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
是
不
首先,您需要一个选项来选择空值。否则,select always将始终显示内容值,并且不会为空
第二,添加脚本
$(document).on('click', '[name=refee]', function(){
$("#refT").attr("required", $(this).val()=='yes');
});
设置“必需”属性以选择如果要基于单选按钮值隐藏/显示范围,并相应地设置或删除必需的
属性,可以尝试以下方法:
document.querySelectorAll('[name=refee]').forEach(函数(rad){
rad.addEventListener('change',function()){
var rangeStyle=document.getElementById('range').style;
如果(this.value='yes'){
rangeStyle.display='inline-block';
document.getElementById('refT')。required=true;
}
否则{
rangeStyle.display='none';
document.getElementById('refT')。removeAttribute('required');;
}
});
});代码>
#范围{
显示:无;
}
对
不
年龄范围:
选择
20-30
30-40
40-50
60+
我看到的只是一组单选按钮和一个下拉列表,如果我错了,请纠正我,您想强制选择单选按钮和下拉列表以提交表单,如果是,则只需验证表单提交上的选择。我省略了表单的其余部分,因为我觉得包含所有内容会浪费每个人的时间。如果需要的话,我可以把剩下的发出去。