使用javascript获取多个表单的单选按钮值答案

【问题标题】：using javascript to get radio button values of multiple forms使用javascript获取多个表单的单选按钮值
【发布时间】：2013-06-29 05:32:53
【问题描述】：

注意：我只是在学习 javascript。所以请不要使用 jQuery 答案。我会去那里的。

我有 7 个表单，所有表单都带有一组单选按钮，当单击每个表单的一个按钮时，这些单选按钮会一个接一个地显示。工作正常。但是当我完成时，我可能有几十个表格。必须有一种更好的方法来获取单击按钮的值，即为每个表单创建一个 getValue。这是我所做的有效的工作：

<script>
function initdisplay() {
document.getElementById("painLocation").style.display="block";
document.getElementById("painSystem").style.display="none";
document.getElementById("painTemporPatt").style.display="none";
document.getElementById("painIntensDur").style.display="none";
document.getElementById("painEtiology").style.display="none";
document.getElementById("painKav").style.display="none";
}
window.onload = initdisplay;

var painLocationValue = 0;
var painSystemValue = 0;
var painTemporPattValue = 0;
var painIntesDurValue = 0;
var painEtiologyValue = 0;
var painKavValue = 0;

function getPainLocationValue() {
var radioButtons = document.getElementsByName("location");

for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
    painLocationValue = radioButtons[i].value;
    document.getElementById("painLocation").style.display="none";
    document.getElementById("painSystem").style.display="block";
    alert(painLocationValue);
    }
 }
}

// ... other similar methods here

function getPainKavValue() {
var radioButtons = document.getElementsByName("kav");

for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
    painKavValue = radioButtons[i].value;
    document.getElementById("painKav").style.display="none";
    alert(radioButtons[i].value);
    }
  }
 } 

</script>

</head>

那么 HTML 看起来像这样：

<body>
<form id="painLocation" action="">
<p class="formPainCode">Q1: What is the location of your ailment?</p>
<input type="radio" name="location" value="000" onclick="getPainLocationValue()"> Head, Face, Mouth<br><br>
<input type="radio" name="location" value="100" onclick="getPainLocationValue()"> Cervical   (neck) Region<br><br>
<input type="radio" name="location" value="200" onclick="getPainLocationValue()"> Upper Shoulder and Upper Limbs<br><br>
<input type="radio" name="location" value="300" onclick="getPainLocationValue()"> Thoracic (chest) Region<br><br>
<input type="radio" name="location" value="400" onclick="getPainLocationValue()"> Abdominal Region<br><br>
<input type="radio" name="location" value="500" onclick="getPainLocationValue()"> Lower Back, Lumbar Spine, Sacrum, Coccyx<br><br>
<input type="radio" name="location" value="600" onclick="getPainLocationValue()"> Lower Limbs<br><br>
<input type="radio" name="location" value="700" onclick="getPainLocationValue()"> Pelvic Region<br><br>
<input type="radio" name="location" value="800" onclick="getPainLocationValue()"> Anal, Perineal, Genital Region<br><br>
<input type="radio" name="location" value="900" onclick="getPainLocationValue()"> More than one location<br><br>
</form>
...
<form id="painKav" action="">
<p class="formPainCode">Q11: On which side of your body is your ailment?</p>
<input type="radio" name="kav" value="R" onclick="getPainKavValue()"> Right<br><br>
<input type="radio" name="kav" value="L" onclick="getPainKavValue()"> Left<br><br>
<input type="radio" name="kav" value="C" onclick="getPainKavValue()"> Center<br><br>
<input type="radio" name="kav" value="M" onclick="getPainKavValue()"> More than one side<br><br>
</form>

</body>
</html>

【问题讨论】：

您需要了解事件委托。在祖先元素上创建一个监听器（比如在 body 或封闭的 div 元素上）并使用 event.target（或旧 IE 中的 event.srcElement）来获取触发事件的元素。然后，您可以测试元素的属性以查看它是否是您感兴趣的元素并从那里开始。您可能想查看JavaScript Toolbox 的表单功能。
以上评论是个好建议。您还可以考虑使用不涉及特定 ID 或任何内容的类（原型）或静态方法来抽象您的方法，然后挂钩到表单的 onSubmit 属性以调用它们。
感谢您的出色建议。我还需要忘记我的“无 jQuery”条件。

标签： javascript forms radio

【解决方案1】：

又过了几个令人沮丧的小时后，我放弃了“没有 jQuery”的条件。剩下的很简单。我使用以下代码检测点击，并获取点击按钮的值。因为我希望我的一些表单包含单选按钮以外的输入类型，所以我也改变了它。此时，jQuery 看起来像这样：

<script>
$(document).ready(function () {
    $("input").click(function() {
    var painCode = $(this).val();
    alert("The painCode for this person is " + painCode);   
    });//end click function
}); //end document ready    
</script>

我清理了 html。一个典型的表格现在看起来像这样：

<div id="painIntensDur">
<form class="painCodeForm" action="">
<p class="formPainCode">Q4: If you experience pain from your ailment, which of the following best describes its intensity and duration? </p>
<input type="radio" name="intensdur" value=".1" > Mild and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".8" > Mild and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".9" > Mild and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".4" > Medium and  less than 1 month<br><br>
<input type="radio" name="intensdur" value=".2" > Medium and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".3" > Medium and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".7" > Severe and  less than 1 month<br><br>
<input type="radio" name="intensdur" value=".5" > Severe and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".6" > Severe and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".0" > Not sure<br><br>
</form>
</div>

再次感谢您的出色建议。相信以后会派上用场的。

【讨论】：