Jquery 计算选定的无线电值之和以设置条形图的动画
我有一组5个问题,带有是/否单选按钮。“否”按钮的值为0,而“是”按钮的值为20(表示20%,因此5 x“是”答案=100%) 这一切都是正确的(虽然如果你有一个更优雅的解决方案,请随意这么说),但我现在想做的是根据总数改变一个图形,所以如果总数是'20',那么显示div1,如果是'40',显示div2等等。其想法是为条形图制作动画,即0%、20%、40%、60%、80%或100%Jquery 计算选定的无线电值之和以设置条形图的动画,jquery,Jquery,我有一组5个问题,带有是/否单选按钮。“否”按钮的值为0,而“是”按钮的值为20(表示20%,因此5 x“是”答案=100%) 这一切都是正确的(虽然如果你有一个更优雅的解决方案,请随意这么说),但我现在想做的是根据总数改变一个图形,所以如果总数是'20',那么显示div1,如果是'40',显示div2等等。其想法是为条形图制作动画,即0%、20%、40%、60%、80%或100% 我以前从未使用过jQuery,所以请善待我:)您可以设置一个带背景色的空Div,宽度为0,然后将该Div的值更改为
我以前从未使用过jQuery,所以请善待我:)您可以设置一个带背景色的空Div,宽度为0,然后将该Div的值更改为“total”:
也许你想使用jqueryUI progressbar每次更改时只需设置值即可?谢谢CoursesWeb,太完美了。
<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;
<div id="showbar" style="background-color:blue;height:1em;width:0;"></div>
document.getElementById('showbar').style.width = total+'px';