<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src=""></script>
<title></title>
<style type="text/css">
input:focus, textarea:focus {
border: 1px solid#f00;
background: #fcc;
}
.focus {
border: 1px solid#f00;
background: #fcc;
}
</style>
</head>
<body>
<form>
你爱好的运动是?<br/>
<input type="checkbox" value="足球"/>足球
<input type="checkbox" value="篮球"/>篮球
<input type="checkbox" value="羽毛球"/>羽毛球
<input type="checkbox" value="乒乓球"/>乒乓球
<input type="button" value="全 选"/>
<input type="button" value="全不选"/>
<input type="button" value="反 选"/>
<input type="button" value="提交"/>
</form>
</body>
<script type="text/javascript">
/**
* 复选框应用
* */
$(function () {
$("#checkedAll").click(function () {
$('[name=items]:checkbox').attr('checked', true);
});
$("#checkedNo").click(function () {
$('[name=items]:checkbox').attr('checked', false);
});
$("#checkedRev").click(function () {
$('[name=items]:checkbox').each(function () {
this.checked = !this.checked;
});
});
$("#send").click(function () {
var str = "你选中的是: \r\n";
$('[name=items]:checkbox:checked').each(function () {
str += $(this).val() + "\r\n";
});
alert(str);
});
})
</script>
</html>
您可能感兴趣的文章: