JQuery 中实现复选框全选/全不选/反选功能案例

来源：互联网发布：网络布线测试报告编辑：程序博客网时间：2024/06/05 07:34

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

    <script src="jq183.js"></script>//引入JQuery代码库

</head>

<body>

<input type="button" value="全选" id="all">

<input type="button" value="全不选" id="unall">

<input type="button" value="反选" id="un">

<hr>

<input type="checkbox" value=""> HTML  <br>

<input type="checkbox" value=""> Javascript <br>

<input type="checkbox" value=""> PHP <br>

<input type="checkbox" value=""> Python <br>

<input type="checkbox" value=""> Java <br>

<input type="checkbox" value=""> C/C++ <br>

</body>

<script>

    $.fn.extend({

        //全选 将所有的 CheckBox的checked 属性 都为true

        all:function(){

            this.attr('checked',true)

},

        //全不选 将所有的checked 属性值都变成false

        unall:function(){

            this.attr('checked',false)

},

        //反选 将所有的checked属性值取反

        un:function(){

            for(var i=0;i<this.length;i++){

                this[i].checked=!this[i].checked;

})

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

        $(':checkbox').all();

})

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

        $(':checkbox').unall();

})

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

        $(':checkbox').each(function(){

            //判断并取反

            if(this.checked==true){

                this.checked=false;

            }else{

                this.checked=true;

            //直接取反

           // this.checked=!this.checked;

})

})

</script>

</html>

阅读全文

0 0

JQuery 中 实现复选框全选/全不选/反选功能 案例