Question

javaScript 如何显示选中的复选框的值

请各位大虾指教
我复选框标签代码:
<form name="information">
<input type="checkbox" id="xueli" value="大专" />大专
<input type="checkbox" id="xueli" value="理学学士" />理学学士
<input type="checkbox" id="xueli" value="硕士" />硕士

<input type="button" value="显示" onclick="xianshi()" />
</form>
我写的xianshi()函数:
function xianshi(){
var xueli = document.getElementById("xueli").value;
document.write("您的学历：" + xueli);
}
可是好象无论我选哪个或者多选 都只打印一个 而且都只打印第一个复选框的值(就是大专)

把复选框的'id'换成'name' xianshi()函数的xueli变量:
function xianshi(){
var xueli = document.information.xueli.value;
document.write("您的学历：" + xueli);
}
这样写打出来的是个空值

Answer 1

思路：获取checkbox对象→循环checkbox数组，根据checked属性判断是否选中→使用value属性获取选中项的值。实例演示如下：

1、HTML结构

<form>
    <input type="checkbox" name="xueli" value="大专" />大专
    <input type="checkbox" name="xueli" value="理学学士" />理学学士
    <input type="checkbox" name="xueli" value="硕士" />硕士<br>
    <input type="button" value="显示" onclick="fun()" />
</form>

2、javascript代码

function fun(obj){
	var checkboxes = document.getElementsByName("xueli");
	var str = [];
	for(i=0;i<checkboxes.length;i++){
		if(checkboxes[i].checked){
			str.push(checkboxes[i].value);
		}
	}
	alert(str);
}

3、效果演示

Answer 2

思路：获取checkbox对象→循环checkbox数组，根据checked属性判断是否选中→使用value属性获取选中项的值。实例演示如下：
1、HTML结构
<form>
    <input type="checkbox" name="xueli" value="大专" />大专
    <input type="checkbox" name="xueli" value="理学学士" />理学学士
    <input type="checkbox" name="xueli" value="硕士" />硕士<br>
    <input type="button" value="显示" onclick="fun()" />
</form>
2、javascript代码
function fun(obj){
var checkboxes = document.getElementsByName("xueli");
var str = [];
for(i=0;i<checkboxes.length;i++){
if(checkboxes[i].checked){
str.push(checkboxes[i].value);
}
}
alert(str);
}
3、效果演示

Answer 3

怎么你的筛选框的ID全都是一样的？我将你的页面ID改了一下，JS也改了一下，我的代码：
<form name="information">
<input type="checkbox" id="xueli1" value="大专" />大专
<input type="checkbox" id="xueli2" value="理学学士" />理学学士
<input type="checkbox" id="xueli3" value="硕士" />硕士

<input type="button" value="显示" onclick="xianshi()" />
</form>
<script>
function xianshi(){
var id="";
var xueli ="";
for(var i=1;i<=3;i++)
{
id="xueli"+i;
//判断是否被选中，如果选中，则将选中结果连接起来打印
if(document.getElementById(id).checked==true)
xueli += document.getElementById(id).value+",";
}
document.write("您的学历：" + xueli);
}
</script>

Answer 4

<input type="checkbox" id="xueli" value="大专" />大专

把id改成name
<input type="checkbox" name="xueli" value="大专" />大专

function xianshi(){
var xueli = document.getElementsByName("xueli");
if(var i=0;i<xueli.length;i++){
if(xueli[i].checked == true){
document.write("您的学历：" + xueli[i].checked.value);
}
}

}