JQuery获取复选框checkbox的值
在HTML页面上,有时需要用到input的type为checkbox,下面介绍几种获取checkedbox值的方法:
1.首先展示html代码
<!Doctype html>
<head/>
<body >
<div>
<h2>checkbox 选取测试</h2>
<div>
<input type="checkbox" name="csdn" value="A" />a
<input type="checkbox" name="csdn" value="B" />b
<input type="checkbox" name="csdn" value="C" />c
<input type="checkbox" name="csdn" value="D" />d
<input type="checkbox" name="csdn" value="E" />e
<input type="button" onclick="choose()" value="开始" />
</div>
</body>
</html>
页面效果
2.通过js获取checkbox的值
function choose(){
var obj=document.getElementsByName('csdn');
var str = '';
for(var i=0; i<obj.length; i++){
if(obj[i].checked) str+=obj[i].value+' ';
}
alert(str);
}
页面效果
3.通过Jquery获取checkbox的值
function choose(){
var value=[];
$('input[name="csdn"]:checked').each(function(){
value.push($(this).val());
});
alert(value);
}
当然要想代码能执行,还需要加上jquery的库
<script type="text/javascript" src="jquery-2.0.0.min.js"></script>
页面效果
仔细观察发现这两种方法获取的值,中间的链接方式是不一样的,js默认两个值之间没有特殊字符,JQuery则将获取到的值用逗号’,’分割开来。