Javascript 单击下一个单选按钮后隐藏单选按钮的隐藏输入

我的javascript代码有点混乱，因为我不熟悉js。我有三个带有隐藏输入的单选按钮。现在，如果我单击radioBtn1，隐藏输入就会显示出来。我想要的是，当我单击radioBtn2或radioBtn3时，radioBtn1中隐藏的输入应该被再次隐藏。这意味着当我第二次点击任何radioBtn时，我首先点击的radioBtn，其隐藏的输入应该被再次隐藏

功能余量（选择）{
如果（选择.value=='allowment'）{
document.getElementById（'allowment'）.style.display=“block”；
}否则{
document.getElementById（‘余量’）.style.display=“无”；
}
} 
函数教学（选择）{
如果（select.value==“学费”）{
document.getElementById（“学费”）.style.display=“block”；
}否则{
document.getElementById（“学费”）.style.display=“无”；
}
} 
功能供应（选择）{
如果（选择.value==“学校供应”）{
document.getElementById（'school_supply'）.style.display=“block”；
}否则{
document.getElementById（'school_supply'）.style.display=“无”；
}
}

津贴


食物津贴
交通津贴

金钱：
图腾


学费

金钱：
学校

书
统一的

金钱：

在显示输入之前，关闭其他输入：

function Allowance(select){
   if(select.value=='Allowance'){   
     document.getElementById('tuition_fee').style.display = "none";
     document.getElementById('school_supply').style.display = "none";
     document.getElementById('allowance').style.display = "block";
   }else{
    document.getElementById('allowance').style.display = "none";
   }
} 
function Tuition(select){
  if(select.value=='Tuition Fee'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('school_supply').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
   } else{
    document.getElementById('tuition_fee').style.display = "none";
   }
} 
function Supply(select){
  if(select.value=='School Supply'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "none";
    document.getElementById('school_supply').style.display = "block";
   } else{
    document.getElementById('school_supply').style.display = "none";
   }
} 

---

在显示输入之前，关闭其他输入：

function Allowance(select){
   if(select.value=='Allowance'){   
     document.getElementById('tuition_fee').style.display = "none";
     document.getElementById('school_supply').style.display = "none";
     document.getElementById('allowance').style.display = "block";
   }else{
    document.getElementById('allowance').style.display = "none";
   }
} 
function Tuition(select){
  if(select.value=='Tuition Fee'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('school_supply').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
   } else{
    document.getElementById('tuition_fee').style.display = "none";
   }
} 
function Supply(select){
  if(select.value=='School Supply'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "none";
    document.getElementById('school_supply').style.display = "block";
   } else{
    document.getElementById('school_supply').style.display = "none";
   }
} 

---

因为您的逻辑是局部的，所以您显示的是字段，而不是隐藏其他字段

function Allowance(select){
   if(select.value=="Allowance"){
    document.getElementById('allowance').style.display = "block";
    document.getElementById('tuition_fee').style.display = "none";
    document.getElementById('school_supply').style.display = "none";
   }
} 
function Tuition(select){
  if(select.value=='Tuition Fee'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
    document.getElementById('school_supply').style.display = "none";
   } 
} 
function Supply(select){
  if(select.value=='School Supply'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
    document.getElementById('school_supply').style.display = "block";
   }
} 

在这里拉小提琴：

---

因为您的逻辑是局部的，所以您显示的是字段，而不是隐藏其他字段

function Allowance(select){
   if(select.value=="Allowance"){
    document.getElementById('allowance').style.display = "block";
    document.getElementById('tuition_fee').style.display = "none";
    document.getElementById('school_supply').style.display = "none";
   }
} 
function Tuition(select){
  if(select.value=='Tuition Fee'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
    document.getElementById('school_supply').style.display = "none";
   } 
} 
function Supply(select){
  if(select.value=='School Supply'){
    document.getElementById('allowance').style.display = "none";
    document.getElementById('tuition_fee').style.display = "block";
    document.getElementById('school_supply').style.display = "block";
   }
} 

在这里拉小提琴：

---

您可以使用jquery减少代码。请看一下下面的代码，它可能会对您有所帮助

$（文档）.ready（函数（）{
$（'.sub_list'）.css（'display'，'none'）；
$（'input[type=radio]'）。更改（函数（）{
$（'.sub_list'）.css（'display'，'none'）；
$（'#'+this.value）.css（'display'，'block'）；
console.log（this.value）；
})
});

津贴


食物津贴
交通津贴

金钱：
图腾


学费

金钱：
学校

书
统一的

金钱：
您可以使用jquery减少代码。请看一下下面的代码，它可能会对您有所帮助


$（文档）.ready（函数（）{
$（'.sub_list'）.css（'display'，'none'）；
$（'input[type=radio]'）。更改（函数（）{
$（'.sub_list'）.css（'display'，'none'）；
$（'#'+this.value）.css（'display'，'block'）；
console.log（this.value）；
})
});

津贴


食物津贴
交通津贴

金钱：
图腾


学费

金钱：
学校

书
统一的

金钱：
欢迎您，如果您觉得它有用，您可以让它成为可接受的答案，这样其他人也可以使用它。欢迎您，如果您觉得它有用，您可以让它成为可接受的答案，这样其他人也可以使用它