我是一名学生,我要做一个关于考试的页面。
我想把几个复选框分开,这样它们就不会重叠和相加。
我怎么能拥有"q1";以及";q2";单独操作?
每个问题只检查一个,以及两个是否相加。
<script type="text/javascript">
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk){
var obj = document.getElementsByName("q1");
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
</script>
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
更新checkOnly
函数以将名称添加为arg:
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
在HTML更新方法中,将name
作为第二个参数传递:
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this, 'q2')" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="2"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="3"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="4"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="2"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="3"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="4"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >