0

はい/いいえのラジオボタンが付いた5つの質問のセットがあります。no ボタンの値は 0 で、yes ボタンの値は 20 です (20% を表すため、5 x yes 回答 = 100%)。

<div id="test-questions">
<p>Question 1
  <input type="radio" id="r1" name="Set1" value="0" /><label for="r1"> No</label><br>
  <input type="radio" id="r2" name="Set1" value="20" /><label for="r2"> Yes</label>
</p>
<p>Question 2
  <input type="radio" id="r3" name="Set2" value="0" /><label for="r3"> No</label><br>
  <input type="radio" id="r4" name="Set2" value="20" /><label for="r4"> Yes</label>
</p>
<p>Question 3
  <input type="radio" id="r5" name="Set3" value="0" /><label for="r5"> No</label><br>
  <input type="radio" id="r6" name="Set3" value="20" /><label for="r6"> Yes</label>
</p>
<p>Question 4
  <input type="radio" id="r7" name="Set4" value="0" /><label for="r7"> No</label><br>
  <input type="radio" id="r8" name="Set4" value="20" /><label for="r8"> Yes</label>
</p>
<p>Question 5
  <input type="radio" id="r9" name="Set5" value="0" /><label for="r9"> No</label><br>
  <input type="radio" id="r10" name="Set5" value="20" /><label for="r10"> Yes</label>
</p>
<p><input id="total" type="hidden" name="total" value="" /></p>
</div>

合計を計算する次のスクリプトがあります。

function setRadios(){
function sumRadios(){
    var total = 0, i = 1, oForm = this.form;
    while (radgrp = oForm.elements['Set' + (i++)]){
        j = radgrp.length;
        do
            if (radgrp[--j].checked){
                total += Number(radgrp[j].value);
                break;
            }
        while (j);
    }
    oForm.elements.total.value = total.toFixed(2);
}

var i = 0, input, inputs = document.getElementById('test-questions').getElementsByTagName('input');
while (input = inputs.item(i++))
    if (input.name.match(/^Set\d+$/))
        input.onclick = sumRadios;
}
onload = setRadios;

これはすべて正しく機能します (ただし、より洗練されたソリューションをお持ちの場合は、お気軽にそう言ってください)。ここでやりたいことは、合計に基づいてグラフィックを変更することです。したがって、合計が「20」の場合は表示されます。 div1、「40」の場合は div2 などを表示します。アイデアは、棒グラフをアニメーション化することです。つまり、0%、20%、40%、60%、80%、または 100% です。

私はこれまでjQueryを使ったことがないので、親切にしてください:)

4

1 に答える 1

0

背景色と幅 0 で空の Div を設定し、その Div の値を「合計」で変更できます。

<div id="showbar" style="background-color:blue;height:1em;width:0;"></div>

sumRadios() では:

document.getElementById('showbar').style.width = total+'px';
于 2012-06-09T05:48:40.090 に答える