jQuery全选反选全不选


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <script type="text/javascript" src="jQuery/jquery-2.1.1.js" >script>
        <script>
            $(function() {  //prop和attr方法都是设置或者修改被选元素的属性,
        // prop方法用于HTML元素本身就带有的固有属性,
        // attr方法用于HTML元素自己定义的dom属性,

        $("#checkedAll").click(function() {

            if (this.checked) {

                $("[name=check]:checkbox").prop("checked", true);
            }else {

                $("[name=check]:checkbox").prop("checked", false);
            }
        });

        $("#checkboxAll").click(function() {

            $("[name=check]:checkbox").prop("checked", true);
        });

        $("#checkedNo").click(function() {

            $("[name=check]:checkbox").prop("checked", false);
        });

        $("#checkedRev").click(function() {

            $("[name=check]:checkbox").each(function() {
                console.log(this.checked);
                this.checked = !this.checked//this指当前的html对象
            });
        });

        $("#submit").click(function() {

            var str = "你喜欢的是:"
            $("[name=check]:checkbox:checked").each(function() {

                str += $(this).val() + "||";//这里$(this)指的是jquery对象
            })

            console.log(str);
        });
    })

        script>

    head>
    <body>
<form>

        <label ><input type="checkbox" name="check" >唱歌label>
        <label ><input type="checkbox" name="check">跳舞label>
        <label ><input type="checkbox" name="check">吃饭label>
        <label ><input type="checkbox"  name="check">烫头label>
        <br>
        <input type="button" name="all" id="checkboxAll" value="全 选">
        <input type="button" name="no" id="checkedNo" value="全不选">
        <input type="button" name="reverse" id="checkedRev" value="反 选">

    form>



    body>
html>

你可能感兴趣的:(jQuery全选反选全不选)