0

注：私はJavaScriptを学んでいます。したがって、まだjQueryの回答はありません。私はそこに着きます。

各フォームの 1 つのボタンがクリックされると、1 つずつ表示されるラジオ ボタンのグループを持つ 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 に答える