checkbox全选/反选
程序员文章站
2022-06-01 13:15:24
...
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全选</title>
<script type="text/javascript" src="jquery/jquery-1.4.3.min.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$( function() {
$('.checkAll').live('change',function() { //元素绑定一个简单的click事件
$('.cb-element').attr('checked', $(this).is(':checked' )?'checked':''); //匹配给定的属性是某个特定值的元素
$(this).next().text($(this).is(':checked')?'全选':'反选'); //用于筛选的表达式(条件表达式)
});
$('.cb-element').live( 'change', function() {
$('.cb-element').length == $('.cb-element:checked').length ? $('.checkAll').attr('checked','checked').next().text('全选'):$('.checkAll').attr('checked','').next().text('反选');
});
});
</script>
</head>
<body>
<div class="controls">
<span><input type="checkbox" class="checkAll"/><b><label id="lbl">全选/反选</label></b></span>
</div>
<div class="elements">
<span><input type="checkbox" class="cb-element"/>Checkbox1</span>
<span><input type="checkbox" class="cb-element"/>Checkbox2</span>
<span><input type="checkbox" class="cb-element"/>Checkbox3</span>
<span><input type="checkbox" class="cb-element"/>Checkbox4</span>
</div>
</body>
</html>上一篇： Ubuntu14.04系统的备份和恢复