1. 表单的全选、反选操作一

<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input type="button" id="send" value="提　交"/>
</form>
<script>
$("#CheckedAll").click(function(){
        var checked =$(this).prop("checked")
            //console.log(checked)
        $('[name=items]:checkbox').prop("checked", checked );


    $('[name=items]:checkbox').prop("checked", this.checked ); //所有checkbox跟着全选的checkbox走。
});
</script>

2. 表单的全选、反选操作二

<form method="post" action="">
    你爱好的运动是？
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="CheckedAll" value="全　选"/>
    <input type="button" id="CheckedNo" value="全不选"/>
    <input type="button" id="CheckedRev" value="反　选"/>

    <input type="button" id="send" value="提　交"/>
</form>

//全选
$("#CheckedAll").click(function(){
    $('[name=items]:checkbox').prop('checked', true);
});

//全不选
    $("#CheckedNo").click(function(){
    $('[type=checkbox]:checkbox').prop('checked', false);
});

//反选
$("#CheckedRev").click(function(){
    $('[name=items]:checkbox').each(function(){
        //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。

        //$(this).prop("checked", !$(this).prop("checked"));

        //直接使用JS原生代码，简单实用
        this.checked=!this.checked;
    });
});

3. 补充知识 attr 与 prop

在表单中，有的浏览器只要写 disabled，checked 就可以了，而有的要写成 disabled = "disabled"，checked="checked"。

比如用 attr("checked") 获取 checkbox 的 checked 属性时选中的时候可以取到值,值为"checked"但没选中获取值就是 undefined。

jq 提供新的方法 “prop” 来获取这些属性，就是来解决这个问题的，以前我们使用 attr 获取 checked 属性时返回"checked"和"",现在使用 prop 方法获取属性则统一返回 true 和 false。

那么，什么时候使用 attr()，什么时候使用 prop()？

1.添加属性名称该属性就会生效应该使用 prop();

2.是有 true,false 两个属性使用 prop() 如 checked, selected 或者 disabled;

3.其他则使用 attr();