javascript - JavaScript 检查是否在 HTML 表单中选择了多个单选输入中的任何一个

Question

我正在为多个出版物（电子邮件）创建一个带有订阅/取消订阅选项的 HTML 表单。并需要一个脚本来检查是否选择了收音机。我无法创建所需的逻辑。感谢您的贡献。

这个想法是a）如果有人选择“取消订阅”然后是名字，将为此目的显示电子邮件字段，b）如果选择“订阅”然后是姓氏，也将为此目的显示国家/地区。如果同时选择取消订阅和订阅，则 b) 适用。因此，可以以相同的形式订阅一个发布并取消订阅另一个发布。

似乎 JavaScript 的主要内容是，检查是否选择了一个或多个“订阅”然后做某事，或者如果只检查“取消订阅”然后做其他事情。

这是我的测试表格，可以让基本想法发挥作用。

    function test(){
    	var checked=false;
    	var elements = document.getElementsByClassName("select");
    	
    	for(var i=0; i < elements.length; i++){
    		if (elements[i].checked) {
    			checked = true;
    			alert("Checked");
    			console.log("checked", true);
    		}
    	}
    	
    	if (!checked) {
    		alert("Unchecked");
    		console.log("unchecked", true);
    	}
    	return checked;
    }

    <form>
    Set 1 <br>
      <input class="select" type="radio" name="A" id="subscribe1"> subscribe 1 <br>
      <input class="select" type="radio" name="A" id="unsubscribe1"> unsubscribe 1 <br>
      <hr>
    Set 2 <br>
      <input class="select" type="radio" name="B" id="subscribe2"> subscribe 2 <br>
      <input class="select" type="radio" name="B" id="unsubscribe2"> unsubscribe 2 <br>
        <hr>
      <input type="reset" value="Reset">
      <button type="button" onClick="test();">Run Test </button>
    </form>

标签： javascripthtmlforms

Answer 1

这应该可以解决问题。使用if/else构造来确定每个无线电状态：

function test() {
  var checked = false;
  var elements = document.getElementsByClassName("select");

  for (var i = 0; i < elements.length; i++) {
    if (elements[i].checked) {
      checked = true;
      alert(elements[i].id + " Checked");
      console.log(elements[i].id, "checked", true);
    } else {
      alert(elements[i].id + " Unchecked");
      console.log(elements[i].id, "unchecked", true);
    }
  }
  return checked;
}

<form>
  Set 1 <br>
  <input class="select" type="radio" name="A" id="subscribe1"> subscribe 1 <br>
  <input class="select" type="radio" name="A" id="unsubscribe1"> unsubscribe 1 <br>
  <hr> Set 2 <br>
  <input class="select" type="radio" name="B" id="subscribe2"> subscribe 2 <br>
  <input class="select" type="radio" name="B" id="unsubscribe2"> unsubscribe 2 <br>
  <hr>
  <input type="reset" value="Reset">
  <button type="button" onClick="test();">Run Test </button>
</form>