Question

注意：我只是在学习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>

Answer 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>

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

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

1 个答案: