<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.11jQuery表单事件之change事件</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//全选
$('#selectAll').change(function(){
$('.hobby').prop('checked',true);
});
//反选
$('#selectBack').change(function(){
$('.hobby').each(function(index, element) {
$(this).prop('checked',!$(this).prop('checked'));
});
});
$('#user').change(function(){
alert("你输入的信息改为:"+$(this).val());
});
});
</script>
</head>
<body>
<input type="checkbox" id="selectAll">全选<br>
<input type="checkbox" id="selectBack">反选<br>
<input type="checkbox" class="hobby">读书<br>
<input type="checkbox" class="hobby">游泳<br>
<input type="checkbox" class="hobby">跑步<br>
<input type="checkbox" class="hobby">电影<br>
<input type="checkbox" class="hobby">音乐<br>
请输入内容:<input type="text" id="user" ><br>
</body>
</html>
默认效果
单击全选按钮
单击读书、跑步、音乐复选按钮
单击反选复选框
改变文本框内容后
