首页 新闻 搜索 专区 学院

使用jquery实现表单的全选与全不选功能只能监听一次

0
[已解决问题] 解决于 2016-05-30 09:27

如图,功能可以实现,但是点击一次实现了全选后,取消全选,就不可以再次全选了。请问是出了什么问题

<!DOCTYPE html>
<html>
<head>
    <title>斑马状表格实现</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./js/lib/jquery.js"></script>
</head>
<body>
    <div id="wrap">
        <table>
            <tr>
                <th>选择</th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>工资</th>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox1" value="0"/></td>
                <td>1104201</td>
                <td>张小明</td>
                <td></td>
                <td>14000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox2" value="0"/></td>
                <td>1104202</td>
                <td>吴呜呜</td>
                <td></td>
                <td>11000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox3" value="0"/></td>
                <td>1104203</td>
                <td>李春花</td>
                <td></td>
                <td>12000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox4" value="0"/></td>
                <td>1104204</td>
                <td>希特勒</td>
                <td></td>
                <td>18000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox5" value="0"/></td>
                <td>1104205</td>
                <td>李飞刀</td>
                <td></td>
                <td>10000</td>
            </tr>
            <tr>
                <td style="text-align:left;height:28px"><span><input type="checkbox" id="checkall">全选</span></td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        $(function() {
            $('table tr:nth-child(odd)').css('background-color','#eee');

            $('#checkall').click(function() {
                if(this.checked) {
                    $('table tr td input[type = checkbox]').attr('checked',true);
                }
                else {
                    $('table tr td input[type = checkbox]').attr('checked',false);
                }
            })
        })
    </script>

    <style type="text/css">
        td{border-right :solid 1px red; border-bottom:solid 1px red;}
    </style>
</body>
</html>
uyisi的主页 uyisi | 初学一级 | 园豆:188
提问于:2016-05-30 09:00
< >
分享
最佳答案
1

 

没问题啊 复制下来 运行。

<!DOCTYPE html>
<html>
<head>
    <title>斑马状表格实现</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
</head>
<body>
    <div id="wrap">
        <table>
            <tr>
                <th>选择</th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>工资</th>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox1" value="0"/></td>
                <td>1104201</td>
                <td>张小明</td>
                <td></td>
                <td>14000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox2" value="0"/></td>
                <td>1104202</td>
                <td>吴呜呜</td>
                <td></td>
                <td>11000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox3" value="0"/></td>
                <td>1104203</td>
                <td>李春花</td>
                <td></td>
                <td>12000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox4" value="0"/></td>
                <td>1104204</td>
                <td>希特勒</td>
                <td></td>
                <td>18000</td>
            </tr>
            <tr>
                <td><input type="checkbox" id="checkbox5" value="0"/></td>
                <td>1104205</td>
                <td>李飞刀</td>
                <td></td>
                <td>10000</td>
            </tr>
            <tr>
                <td style="text-align:left;height:28px"><span><input type="checkbox" id="checkall">全选</span></td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        $(function() {
            $('table tr:nth-child(odd)').css('background-color','#eee');

            $('#checkall').click(function() {
                if(this.checked) {
                    $('table tr td input[type = checkbox]').attr('checked',true);
                }
                else {
                    $('table tr td input[type = checkbox]').attr('checked',false);
                }
            })
        })
    </script>

    <style type="text/css">
        td{border-right :solid 1px red; border-bottom:solid 1px red;}
    </style>
</body>
</html>

 

 

奖励园豆:5
s_p | 菜鸟二级 |园豆:265 | 2016-05-30 09:07

没找到你改的地方,但是复制上去后真的可以用了,不知道我的哪里错了。谢谢了

uyisi | 园豆:188 (初学一级) | 2016-05-30 09:16

应该是我的jquery文件有问题,去换一个就好了

uyisi | 园豆:188 (初学一级) | 2016-05-30 09:18
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册