checkbox全选/反选

最新推荐文章于 2023-07-07 09:41:54 发布

hehefefe

最新推荐文章于 2023-07-07 09:41:54 发布

阅读量88

点赞数

分类专栏： Jquery 文章标签： Java HTML

Jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ 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>