JQ 一键勾选和取消所有input 代码

JQ如何一键勾选所有复选框或者一键取消勾选所有复选框呢？元素模板为您解答

html

<div>

        <div><input type="checkbox" name="checkbox" />复选框1</div>

        <div><input type="checkbox" name="checkbox" />复选框2</div>

        <div><input type="checkbox" name="checkbox" />复选框3</div>

        <div><input type="checkbox" name="checkbox" />复选框4</div>

        <div><input type="checkbox" name="checkbox" />复选框5</div>

        <br>

        <div><input type="checkbox" name="checkall" />全选</div>

    </div>

js

        $('input[name="checkall"]').click(function(){

            if($(this).is(':checked')){

                $('input[name="checkbox"]').each(function(){

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

                });

            }else{

                $('input[name="checkbox"]').each(function(){

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

                });

            } 

        });

        // 全选

        $('input[name="checkall"]').click(function(){

            if($(this).is(':checked')){

                $('input:checkbox[name=checkbox]').each(function(){

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

                })

            }else{

                $('input:checkbox[name=checkbox]').each(function(){

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

                })

            }

        })

        var ifAllChecked = true;

        // 是否全选-----是否选中全选按钮

        $('input:checkbox[name=checkbox]').click(function(){

            ifAllChecked = true

            $('input:checkbox[name=checkbox]').each(function(i){

                if(!$(this).is(':checked')){

                    // 有未选

                    ifAllChecked = false; 

                }

            });

            if(ifAllChecked){

                $('input[name="checkall"]').prop("checked",true);

            }else{

                $('input[name="checkall"]').prop("checked",false);

            }

        })