如何实现js的全选

全选框

<script>
        function f(){
    
    
            var c=document.getElementsByName("c");
            var btn=document.getElementById("btn");
            for(var i=0;i< c.length;i++){
    
    
                c[i].checked=true;
            }
            btn.innerHTML="取消";
            btn.onclick=f1;
        }
        function f1(){
    
    
            var c=document.getElementsByName("c");
            var btn=document.getElementById("btn");
            for(var i=0;i< c.length;i++){
    
    
                c[i].checked=false;
            }
            btn.innerHTML="全选";
            btn.onclick=f;
        }
    </script>

这里是HTML代码：

<input type="checkbox" name="c">吃饭
<input type="checkbox" name="c">睡觉
<input type="checkbox" name="c">看书
<button onclick="f()" id="btn">全选</button>