学步园

 

Html代码

    <div>
        <input type="checkbox" id="ckAll" />check all<br />
        <input type="checkbox" name="sub" />1<br />
        <input type="checkbox" name="sub" />2<br />
        <input type="checkbox" name="sub" />3<br />
        <input type="checkbox" name="sub" />4<br />
    </div>

 

 

 Js 代码1

<script type="text/javascript">
    $("#ckAll").click(function () {
        $("input[name='sub']").attr("checked", $(this).attr("checked"));

    });
    $("input[name='sub']").click(function () {
        if ($("input[type=checkbox][name='sub']:checked").length < $("input[name='sub']").length) {
            $("#ckAll").attr("checked", false);
        }
        else {
            $("#ckAll").attr("checked", true);
                }
    })
       
   
     
</script>

 

Js 代码2(注：低版本jquery 不支持)

<script language="JavaScript">
    $("#but1").click(function () {
        alert($("#area").val());
    })
    $(function () {
        $("#ckAll").click(function () {
            $("input[name='sub']").prop("checked", this.checked);
        });

        $("input[name='sub']").click(function () {
            var $subs = $("input[name='sub']");
            $("#ckAll").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
        });
    });
</script>