JQuery 实现复选框全选与全不选

版权声明： https://blog.csdn.net/weixin_29414291/article/details/80039392

–复选框这个主要考察JQuery的选择器。

一、分析过程

1·当点击全选/全不选按钮激发函数调用
2·只需要把其余的复选框的checked属性值与全选/全不选的checked值保持一致即可。

二、具体实现

1·html内容如下；

<table border="1" cellspacing="" cellpadding="">

            <thead><tr><th><input type="checkbox" id="selectAll"/></th><th>2</th><th>3</th></tr></thead>
           <tbody>  
            <tr>
                <td><input type="checkbox" name ="hobby"/></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td><input type="checkbox" name ="hobby"/></td>
                <td></td>
                <td></td>
            </tr><tr>
                <td><input type="checkbox" name ="hobby"/></td>
                <td></td>
                <td></td>
            </tr><tr>
                <td><input type="checkbox" name ="hobby"/></td>
                <td></td>
                <td></td>
            </tbody>
        </table>

2·需要用引入jquery.js文件
3·使用JQ的入口函数

$(function(){

});

注意⚠️：这个入口函数可以有多个而且是按照顺序执行，如果是原生的JS的window.onload =function(){} 这个方式出现了多个的话只会执行最后一个。前面写的入口则会被覆盖掉不执行。
4·一句JQuery 即可实现这个全选与全不选。

$("#selectAll").click(function(){
                    $(":checkbox[name='hobby']").attr("checked",this.checked);
                });

这里用到了JQ的表单选择器：checkbox和属性选择器[name=’hobby’].
这个意思是选择name属性为hobby的复选框JS对象。然后调用其属性方法attr(“checked”,this.checked)设置属性值。其中这个this表示原生的JS对象，所以可以直接用checked属性。其实这一句如果都用JQ对象可以改为：

$("#selectAll").click(function(){
                    $(":checkbox[name='hobby']").attr("checked",$(this).attr("checked"));
                });

三、总结

1·判断checkbox是否被选中是用checked属性进行判断的
如果是JS原生对象用 js对象.checked = =”checked”判断
如果是JQ对象用JQ.attr(“checked”) == true 判断
如果要把其他的置为不是选中状态只需要把JQ.attr(“checked”) =false即可。
2·表单选择器可以直接定位到表单结合属性选择器或者层级选择器可以达到事半功倍的效果
3·平时做相关的内容可以考虑简便方式，重点内容观察现象。

另加一些radio的相关的东东：
如果radio不设置name属性会出现很多问题—解决办法设置name属性且属性值相同。如果没有设置value属性的话默认会是on，所以value属性建议也要一同设置。