0

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

1 回答 1

0

又过了几个令人沮丧的小时后，我放弃了“没有 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>

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

于 2013-07-02T11:51:14.763 回答