复选框：checkbox
html 结构 <input type="checkbox" value="test" />测试
获取value值
function getValue() {
var str = "";
for (var i = 0; i < list.length; i++) {
var tmp = list[i];
if (tmp.type == "checkbox") { // 判断类型
if (tmp.checked) { // 判断是否选中
str += tmp.value;
}
}
}
alert(str);
}
全选
function checkAll() {
for (var i = 0; i < list.length; i++) {
var tmp = list[i];
if (tmp.type == "checkbox") {
if (!tmp.checked) {
tmp.checked = true;
}
}
}
}
取消全选
function removeAll() {
for (var i = 0; i < list.length; i++) {
var tmp = list[i];
if (tmp.type == "checkbox") {
if (tmp.checked) {
tmp.checked = false;
}
}
}
}
反选
function antiAll() {
for (var i = 0; i < list.length; i++) {
var tmp = list[i];
if (tmp.type == "checkbox") {
if (tmp.checked) {
tmp.checked = false;
}
else {
tmp.checked = true;
}
}
}
}
<!DOCTYPE html> <html> <head> <title>复选框checkbox---www.cnblogs.com/kuikui</title> </head> <body> <div id="cont_boxes"> <input type="checkbox" value="test1" />a1 <input type="checkbox" value="test2" />a2 <input type="checkbox" value="test3" />a3 <input type="checkbox" value="test4" />a4 <input type="checkbox" value="test5" />a5 <input type="checkbox" value="test6" />a6 </div> <input type="button" value="确定" onclick="getValue()" /> <input type="button" value="全选" onclick="checkAll()" /> <input type="button" value="取消" onclick="removeAll()" /> <input type="button" value="反选" onclick="antiAll()" /> <script type="text/javascript"> var boxes = document.getElementById("cont_boxes"); var list = boxes.getElementsByTagName("input"); function getValue() { var str = ""; for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { // 判断类型 if (tmp.checked) { // 判断是否选中 str += tmp.value; } } } alert(str); } function checkAll() { for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { if (!tmp.checked) { tmp.checked = true; } } } } function removeAll() { for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { if (tmp.checked) { tmp.checked = false; } } } } function antiAll() { for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { if (tmp.checked) { tmp.checked = false; } else { tmp.checked = true; } } } } </script> </body> </html>
