Question

我有一个简单的电台列表，有6个选项。

<form>
  <div class="radio">
  <label><input type="radio" id="EmergencyOption" name="EmergencyOptionradio" value="1">Emergency</label>
  </div>
  <br>
  <div class="radio">
    <label><input type="radio" id="Non-EmergencyOption" name="Non-EmergencyOptionradio" value="2">Non-Emergency</label>
  </div>
  <br>
  <div class="radio">
    <label><input type="radio" id="VaccinationOption" name="VaccinationOptionradio" value="3">Vaccination</label>
  </div>
  <br>
  <div class="radio">
    <label><input type="radio" id="AdviceOption" name="AdviceOptionradio" value="4">Advice</label>
  </div>
  <br>
  <div class="radio">
    <label><input type="radio" id="BloodTestOption" name="BloodTestOptionradio" value="5">Blood Test</label>
  </div>
  <br>
  <div class="radio">
    <label><input type="radio" id="FamilyPlanningOption" name="FamilyPlanningOptionradio" value="6">Family Planning</label>
  </div>
  <br>
  <div class="buttonholder">
    <a href="AppType.html"<button type="button" id="submitbtn" class="btn btn-success btn-lg">Search</button></a>
  </div>
</form>

这样一个简单的按钮：

<button type="button" id="submitbtn" class="btn btn-success btn-lg">Search</button>

我是javascript的新手，我正在尝试编写一个能够监听点击的功能，然后存储选中的广播列表中的哪个值。根据选择，它将重定向到不同的页面。

我正在努力，但到目前为止只能拿出一些东西：

document.getElementById("submitbtn").onclick = function () {

//this is some code i have so far
if(selectvalue == "1"){
window.open('***','_self');
return true;
}
else if(selectvalue == "2"){
window.open('***');
return true;
}else if(selectvalue == '3'){
window.open('***');
return true;
}else if(selectvalue == '4'){
window.open('***');
return true;
}


};

Answer 1

首先，集合中的所有单选按钮必须具有name的相同值。这就是将它们组合在一起并使它们的选择相互排斥的原因。

接下来，不是为每个单选按钮的value指定任意数字，而是为每个单选按钮指示选择该按钮所代表的值。

接下来，使用 .addEventListener() 而不是“onXyz”事件属性来设置事件处理回调函数，因为这是现代标准。

现在，当单击该按钮时，您需要获取所选单选按钮的值，并且可以使用带有 document.querySelector() 的CSS选择器来完成。

此外，此类代码中不需要return true;。

从那里，您只需要将值与已知值进行比较。您当然可以使用if/else if/else执行此操作（正如您所做的那样），但由于您正在针对多个可能的值检查一件事（所选单选按钮的value），因此 switch 声明更合适（有些人会说优雅）。我在下面的代码中显示了两者：

document.getElementById("submitbtn").addEventListener("click", function () {

  // Get selected radio button value
  var selectvalue = document.querySelector("input[name='EmergencyOption']:checked").value;

  var loc = "";
  
  // Find a match with if/else if/else
  /*
  if(selectvalue == "Emergency"){
    loc = "location1.html";
  } else if(selectvalue == "Non-Emergency"){
    loc = "location2.html";
  } else if(selectvalue == 'Vaccination'){
    loc = "location3.html";
  } else if(selectvalue == 'Advice'){
    loc = "location4.html";    
  } else if(selectvalue == 'BloodTest'){
    loc = "location5.html";    
  } else {
    loc = "location6.html";    
  }
  */
  
  // Find a match with switch
  switch(selectvalue){
    case "Emergency":
      loc = "location1.html";
      break;
    case "Non-Emergency":
      loc = "location2.html";
      break;
    case "Vaccination":
      loc = "location3.html";
      break;
    case "Advice":
      loc = "location4.html";
      break;
    case "BloodTest":
      loc = "location5.html";
      break;
    default:
      loc = "location6.html";
      break;      
  }
  
  console.log("navigating to " + loc);
  window.open(loc);
});

div.radio { margin-bottom:1em; } /* Create one blank line below each div that has a radio button */

<form>
  <div class="radio">
    <label><input type="radio" name="EmergencyOption" value="Emergency">Emergency</label>
  </div>

  <div class="radio">
    <label><input type="radio" name="EmergencyOption" value="Non-Emergency">Non-Emergency</label>
  </div>

  <div class="radio">
    <label><input type="radio" name="EmergencyOption" value="Vaccination">Vaccination</label>
  </div>

  <div class="radio">
    <label><input type="radio" name="EmergencyOption" value="Advice">Advice</label>
  </div>

  <div class="radio">
    <label><input type="radio" name="EmergencyOption" value="BloodTest">Blood Test</label>
  </div>

  <div class="radio">
    <label><input type="radio" name="EmergencyOption" value="FamilyPlanning" >Family Planning</label>
  </div>

  <div class="buttonholder">
    <button type="button" id="submitbtn" class="btn btn-success btn-lg">Search</button>
  </div>
</form>

注意： <br>元素之间的<div>创建一些额外的垂直间距在技术上对br的使用不正确。 br用于分解块内的内容，而不是用于分隔块。要创建该空间，可以使用简单的CSS规则。

Answer 2

您的HTML和代码存在一些问题。

首先：所有单选按钮都需要相同的名称属性，否则它们不会是独占的。

第二：你需要实际获得选择值，例如

let selectvalue = "1"; //default
let inputs = document.getElementsByName("goto");
for (let i = 0; i < inputs.length; i++ ) {
  if (inputs[i].checked) {
    selectvalue = inputs[i].value;
    break;
  }
}

这将做你想要的。

这是一个有效的例子： http://plnkr.co/edit/CGAq4NENWEVUxeqOrW62?p=info

Answer 3

首先，HTML中存在问题 - 这些单选按钮必须共享相同的名称，否则它们将不会切换（它们将像常规复选框一样）。我会坚持斯科特的答案，但我认为if / else和case switch程序是不必要的。我宁愿挂钩检查输入的一些独特属性。

HTML（来自MDN的快速和脏复制粘贴，已编辑）：

<form id="myForm">
  <p>What are you searching for?</p>
  <div>
    <input type="radio" id="contactChoice1" name="contact" value="emergency">
    <label for="contactChoice1">Emergency</label>

    <input type="radio" id="contactChoice2" name="contact" value="vaccination">
    <label for="contactChoice2">Vaccination</label>

    <input type="radio" id="contactChoice3" name="contact" value="bloodtest">
    <label for="contactChoice3">Bloodtest</label>
  </div>
  <div>
    <input type="button" id="submitButton" value="Search"/>
  </div>
</form>

<强> JS

var form = document.getElementById('myForm');

var reroute = function() {
  event.preventDefault;
  var selectValue = form.querySelector("input:checked").value;
  if (selectValue) window.open('https://mydomain.test/' + selectValue); 
}

document.getElementById('submitButton').addEventListener('click', reroute, false);

工作示例here on JSFiddle

OnClick重定向取决于无线电选择

3 个答案: