首先,编写HTML如下:
<form id="form1">
<table border="0">
<tr>
<td>编程语言:</td>
<td>
<input name="language" type="checkbox" value="java" />java
<input name="language" type="checkbox" value="c" />c
<input name="language" type="checkbox" value="c++" />c++
<input name="language" type="checkbox" value="c#" />c#
<input name="language" type="checkbox" value="vb" />vb
</td>
</tr>
</table>
</form>
function readcheck() {
// 方法一
var obj = document.getElementsByName('language');
var s = '';
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) s += obj[i].value + ',';
}
alert(s == '' ? '你还没有选择任何内容!' : s);
// 方法二
var selectedValues = [];
$("input[name='language']:checked").each(function(){
selectedValues.push( $(this).val());
});
alert(selectedValues);
// 方法三 jquery版本在1.3之前 (FF和chrome下无效)
var selectedValues = [];
$("input[name='language'][checked]").each(function() {
selectedValues.push($(this).val());
});
alert(selectedValues);
}
// 全选
function selectall() {
$("input[name='language']").attr("checked", 'true');
}
// 不选
function selectno() {
$("input[name='language']").removeAttr("checked");
}
// 反选
function fanxuan() {
$("input[name='language']").each(function() {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", 'true');
}
});
}