<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery复选框实例</title>
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div id="checkbox">
<input type="checkbox" name="enjoy" />吃
<input type="checkbox" name="enjoy" />喝
<input type="checkbox" name="enjoy" />玩
<input type="checkbox" name="enjoy" />乐
</div>
<div id="btn">
<input type="button" id="chAll" value="全选" />
<input type="button" id="chNone" value="全不选" />
<input type="button" id="chReverse" value="反选" />
</div>
<script>
var chAll = $('#chAll');
var chNone = $('#chNone');
var chReverse = $('#chReverse');
var checkbox = $('#checkbox>:checkbox');
chAll.click(function(){
checkbox.attr('checked',true);
});
chNone.click(function(){
checkbox.attr('checked',false);
});
chReverse.click(function(){
checkbox.each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
</script>
</body>
</html>
注意jQuery版本号的问题!加油!每一天!
jquery复选框实例
最新推荐文章于 2021-05-01 09:41:14 发布