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

Question

我正在创建一个 HTML 表单，其中包含多个出版物(电子邮件)的订阅/取消订阅选项。并需要一个脚本来检查是否选择了 radio 。我无法创建所需的逻辑。感谢您的贡献。

其想法是: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>

Answer 1

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

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>