以“未知”形式查找所有单选按钮答案

【问题标题】：Finding all radio buttons in 'unknown' form以“未知”形式查找所有单选按钮
【发布时间】：2012-01-22 20:04:00
【问题描述】：

我正在尝试编写 javascript 代码，以查找表单中的所有无线电组并检查以确保在每个组中单击了一个。如果您知道表单和组名，这并不难。我想做的是创建一些可以使用任何形式的“onsubmit”调用的代码。我想保持代码足够通用，无需对每个表单进行自定义即可使用。

谢谢

【问题讨论】：

使用“getElementsByTagName('input')”查找DOM元素，然后从其中找到复选框，然后按名称分组，然后检查“已检查”状态并确保已选中在每个组中。

标签： javascript input tags radio

【解决方案1】：

在提交处理程序期间，表单可通过this 关键字或event.currentTarget 属性获得。请注意，如果您使用的是内联事件处理程序，那么您可以将适当的变量传递给任何全局函数，例如<form onsubmit="checkRadios(this);">。然后，您可以遍历表单的 elements 属性以查找您的单选按钮。

【讨论】：

【解决方案2】：

演示：http://jsfiddle.net/rBaUM/16/

  function onSubmitForSomeForm() {
        var groups = {},
            group;
        [].forEach.call(this.elements, function (input) {
            if (input.type === "radio" && input.name) {
                groups[input.name] = groups[input.name] || [];
                groups[input.name].push(input.checked);
            }
        });
        for (group in groups) {
            if (!groups[group].some(function (checked) {
                return checked;
            })) {
                return false; //Some group was completely unchecked
            };
        }
        return true;
    }


console.log( "Both groups completely unchecked", onSubmitForSomeForm.call( document.myform ) );
document.myform.check_list2[0].checked = true;
console.log( "1st group completely unchecked", onSubmitForSomeForm.call( document.myform ) );
document.myform.check_list2[0].checked = false;
document.myform.check_list[0].checked = true;
console.log( "2nd group completely unchecked", onSubmitForSomeForm.call( document.myform ) );
document.myform.check_list2[0].checked = true;
console.log( "Both groups have checked checkbox", onSubmitForSomeForm.call( document.myform ) );

需要填充 .forEach 和 .some

使用方法：

<form onsubmit="return onSubmitForSomeForm.call(this);"></form>

或者：

myform.onsubmit = onSubmitForSomeForm

或者：

myform.addEventListener( "submit", onSubmitForSomeForm, false );

【讨论】：

【解决方案3】：

获取所有单选按钮并创建名称属性数组。然后测试是否都包含一个选中项：

var radios = document.getElementsByTagName("input");
var names = {};
// Iterate over all inputs
for (var i=0; i<radios.length; i++) {
  // Get the radio buttons
  if (radios[i].type = "radio") {
    // Add the name to an object
    if (!names[radios[i].name]) {
      names[radios[i].name] = false;
    }
    // Set the object property to true if this is checked
    if (radios[i].checked) {
      names[radios[i].name] = true;
    }
  }
}
// Now determine if any group is unchecked (still false)
for (var namegroup in names) {
  if (!names[namegroup]) {
    console.log(namegroup + " isn't checked");
  }
}

【讨论】：