<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>checkbox即效</title>
<script src="jQueryNote/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
//加载
$(function () {
//给input标签注册click事件
$('input').click(function () {
var obj = $('input:checked');
var len = obj.length;
var arr = [];
//循环遍历选中的checkbox,获取其value.
$.each(obj, function () {
//$(this).val();括号没有参数表示get value
arr[arr.length] = $(this).val();
});
//设置span的值.
$('#spMsg').text("选中"+len+"项"+"分别是:"+arr.toString());
});
});
</script>
</head>
<body>
<input type="checkbox" name="name" value=" tom" >tom</input>
<input type="checkbox" name="name" value="jack " >jack</input>
<input type="checkbox" name="name" value=" sam" >sam</input>
<br />
<span id="spMsg">....</span>
<div>
<ol>
<li>理清思路</li>
<li>多练习</li>
</ol>
</div>
</body>
</html>