全选,全不选,反选(jquery终极版)

javascript

浏览数:294

2019-1-7


前台

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Smarty分页程序</title>

<style type='text/css'>
    .news{width:800px;border:1px #369 solid; border-collapse:collapse;}
    .news tr th,.news tr td {border:1px #369 solid; text-align:center;line-height:30px; font-size:12px;}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script>
    $(function(){

        /***********全选,全不选,反选************/

        $('#abc').click(function(){

            if($(this).prop('checked')){

                $('table input[type=checkbox]').prop('checked',true);           }else{

                $('table input[type=checkbox]').prop('checked',false);

            }
        });     $('#bcd').click(function(){

            $('table input[type=checkbox]').each(function(){

                if ($(this).prop("checked")) {

                 $(this).prop("checked", false);

              }else {

                 $(this).prop("checked", "checked");

              }

            });

        });

        /***********全选,全不选,反选************/

    })
</script>

</head>
<body>
    <h1>Smarty分页程序</h1>
    全选:<input id='abc' type="checkbox">
    反选:<input id='bcd' type="checkbox">
    <input type="button" value="删除">
    <table class='news'>
        <tr>
            <th>操作:
            </th>
            <th>编号</th>
            <th>姓名</th>
            <th>内容</th>
            <th>发布时间</th>
        </tr>

        {{foreach from = $data item=v key=k}}
        <tr>
            <td><input type="checkbox"></td>
            <td>{{$v['id']}}</td>
            <td>{{$v['username']}}</td>
            <td>{{$v['content']}}</td>
            <td>{{$v['addtime']}}</td>
        </tr>
        {{/foreach}}
        <tr>
            <td colspan="5">
                <input type='button' id='btnFirst' value='首页'>
                <input type='button' id='btnPrev' value='上一页'>
                <a href='fenye.php?page={$pageNext}'>下一页</a>
                <a href='fenye.php?page={$pageCount}'>末页</a>
            </td>
            
        </tr>
    
    
    </table>
</body>
</html>