美文网首页让前端飞Web前端之路程序员
全选、反选和全不选效果(jQuery)

全选、反选和全不选效果(jQuery)

作者: 被时光移动的城 | 来源:发表于2017-05-24 10:59 被阅读137次

本文内容比较简单却很常用,主要讲述使用jQuery的选择器实现全选、全不选(两种方法实现)及反选(两种方法实现)的效果。
效果图:

全选、全不选及反选效果.gif

详情见文中代码注释。
代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //全选
                $("#qx").click(function(){
                    $("#che :checkbox").prop('checked',true);
                })
                //全不选
                $("#qbx").click(function(){
                    //使用prop将checked属性改为false(建议),或者删除checked属性(不建议)。
                    $("#che :checkbox").prop('checked',false);//方法一:将checked属性改为false
//                  $("#che :checkbox").removeProp('checked');//方法二:删除checked属性
                })
                //反选方法一:先得到已经被选择的对象,然后全选,再将之前被选择的对象删除checked属性
//              $("#fx").click(function(){
//                  var yx = $("#che :checked");
//                  $("#che :checkbox").prop('checked',true);
//                  yx.removeProp('checked');
//              })
//              反选方法二:
//              prop(‘checked’,函数(参数一,参数二));函数是用来设置当前属性(checked)的属性值的,里面两个参数,可设为i,val。
//              i代表当前元素序号,val代表当前属性的属性值。
                $("#fx").click(function(){
                    $("#che :checkbox").prop('checked',function(i,val){
                        return !val;//返回当前属性值相反的值
                    })
                })
                
            })
        </script>
    </head>
    <body>
        <input type="button"  id="qx" value="全选" />
        <input type="button"  id="qbx" value="全不选" />
        <input type="button"  id="fx" value="反选" />
        <br /><br />
         <table  id="che">
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>好好学习,天天向上</td>
            </tr>
         </table>
    </body>
</html>

如有问题欢迎交流。

如转载请注明出处,谢谢!

相关文章

网友评论

    本文标题:全选、反选和全不选效果(jQuery)

    本文链接:https://www.haomeiwen.com/subject/mrpnxxtx.html