Question

如果任何单选按钮被选为ID=adjustChk，则下面的Javascript代码应更新隐藏字段的值，该字段的Yes为“y”。

按预期更新字段，但如果任何无线电更改回'n'，隐藏字段也会更新为'n'。当遇到'y'时，希望休息将退出for循环，但这并不像我希望的那样。

window.onload = function() {
		var ele = document.getElementsByTagName("input");
		var hid = document.getElementById("adjustChk");
		var chkItm = "";
		for(var i = 0, item; item = ele[i]; i++){
			item.addEventListener("click", function() {
				chkItm = this.value;
				for (var i = 0; i < ele.length; i++){
			    	if(chkItm === 'y'){
						hid.value = 'y';
						break;
					} else {
         				hid.value = 'n';
					}
				};
			});
		};
	};

<div> 
  Yes<input type="radio" name="radio1" value="y" />
  No<input type="radio" name="radio1" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio2" value="y" />
  No<input type="radio" name="radio2" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio3" value="y" />
  No<input type="radio" name="radio3" value="n" checked="checked" />
</div>

<input id="adjustChk" type="hidden" value="n" />

我仍然掌握JS，所以如果使用普通的Jasvascript也有更好的方法，那么看看它会很有帮助！

Answer 1

问题在于您正在查看单击的单选按钮的值，但您真正想要的是查看所有“是”单选按钮的已检查状态。

我可能会得到一个真正的元素数组（使用this answer中“类似数组”部分中描述的slice技巧），使用Array#forEach来连接处理程序（但for循环也没问题），并且在处理点击时，使用Array#some获取一个标记，表明已检查的任何按钮是否具有值"y"。

这是一个例子，见评论;我使隐藏的区域可见，因此在任何给定时间都很容易看到它的值：

// Get the radio buttons, convert the NodeList into a true array
var ele = Array.prototype.slice.call(document.getElementsByTagName("input"));

// Get the hidden field
var hid = document.getElementById("adjustChk");

// Attach a handler to all of our radio buttons
ele.forEach(function(el) {
  el.addEventListener("click", radioHandler, false);
});

function radioHandler() {
  // Set `hid.value` to "y" if any of the checked checkboxes have the value "y",
  // "n" otherwise
  hid.value = ele.some(function(el) {
    return el.checked && el.value === "y";
  }) ? "y" : "n";
}

<div> 
  Yes<input type="radio" name="radio1" value="y" />
  No<input type="radio" name="radio1" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio2" value="y" />
  No<input type="radio" name="radio2" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio3" value="y" />
  No<input type="radio" name="radio3" value="n" checked="checked" />
</div>

<input id="adjustChk" type="text" value="n" />

但是，这是使用for循环的版本：

// Get the radio buttons
var ele = document.getElementsByTagName("input");

// Get the hidden field
var hid = document.getElementById("adjustChk");

// Attach a handler to all of our radio buttons
for (var i = 0; i < ele.length; ++i) {
  ele[i].addEventListener("click", radioHandler, false);
}

function radioHandler() {
  // Assume no "yes" radio buttons are checked
  hid.value = "n";
  for (var i = 0; i < ele.length; ++i) {
    // Get the radio button for this loop iteration
    var el = ele[i];
    // If it's checked and has value "y", update the value and we're done
    if (el.checked && el.value === "y") {
      hid.value = "y";
      break;
    }
  }
}

<div> 
  Yes<input type="radio" name="radio1" value="y" />
  No<input type="radio" name="radio1" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio2" value="y" />
  No<input type="radio" name="radio2" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio3" value="y" />
  No<input type="radio" name="radio3" value="n" checked="checked" />
</div>

<input id="adjustChk" type="text" value="n" />

只是为了好玩，这是第一个使用ES2015（又名“ES6”）的例子：

// Get the radio buttons as a true array
let ele = Array.from(document.getElementsByTagName("input"));

// Get the hidden field
let hid = document.getElementById("adjustChk");

// Attach a handler to all of our radio buttons
ele.forEach(el => {
  el.addEventListener("click", radioHandler, false);
});

function radioHandler() {
  // Set `hid.value` to "y" if any of the checked checkboxes have the value "y",
  // "n" otherwise
  hid.value = ele.some(el => el.checked && el.value === "y") ? "y" : "n";
}

<div> 
  Yes<input type="radio" name="radio1" value="y" />
  No<input type="radio" name="radio1" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio2" value="y" />
  No<input type="radio" name="radio2" value="n" checked="checked" />
</div>
<div> 
  Yes<input type="radio" name="radio3" value="y" />
  No<input type="radio" name="radio3" value="n" checked="checked" />
</div>

<input id="adjustChk" type="text" value="n" />

Javascript没有正确更新隐藏字段

1 个答案: