javascript

Jquery implements a general notation for checkbox all and none

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        //Name is a property of the HTML form dedicated to distinguishing the chechboxes from the groups, not the id(which must be unique) or any other property
        function getValues() {
            var aV = getCheckboxValues("a");
            var bV = getCheckboxValues("b");
            var cV = getCheckboxValues("c");
            var result = "a Group of selected value : " + (aV=="" ? " No value is selected " : aV) + "n" +
                "b Group of selected value : " + (bV == "" ? " No value is selected " : bV) + "n" +
                "c Group of selected value : " + (cV == "" ? " No value is selected " : cV);
            alert(result);
        }
        function getCheckboxValues(name) {
            return $(":checkbox[name="+name+"]:checked").map(function(){ 
                return $(this).val();
            }).get().join(",");
        }
        function chkAll(obj) {
            var name = $(obj).attr("name");
            //Maybe you think I'm too complicated, but there are so many versions of jquery that it's always good to learn something
            //1. Above 1.6 jquery
            //$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));
            //2. Jquery below 1.6
            //$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));
            //3. General notation
            $(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {
                this.checked = obj.checked;
            });
        }
    </script>
</head>
<body>
    <div >
        <span> The first 1 group (a) : <input type="checkbox" name="aAll" onclick="chkAll(this)" /> Future generations / All don't choose </span>
        <input type="checkbox" name="a" value="a1" checked="checked" />a1
        <input type="checkbox" name="a" value="a2" checked="checked"  />a2
        <input type="checkbox" name="a" value="a3" />a3
        <input type="checkbox" name="a" value="a4" />a4<br />
        <span> The first 2 group (b) : <input type="checkbox" name="bAll" onclick="chkAll(this)" /> Future generations / All don't choose </span>
        <input type="checkbox" name="b" value="b1" />b1
        <input type="checkbox" name="b" value="b2" checked="checked" />b2
        <input type="checkbox" name="b" value="b3" checked="checked"  />b3
        <input type="checkbox" name="b" value="b4" />b4<br />
        <span> The first 3 group (c) : <input type="checkbox" name="cAll" onclick="chkAll(this)" /> Future generations / All don't choose </span>
        <input type="checkbox" name="c" value="c1" />c1
        <input type="checkbox" name="c" value="c2" />c2
        <input type="checkbox" name="c" value="c3" checked="checked" />c3
        <input type="checkbox" name="c" value="c4" checked="checked"  />c4<br />
        <br />
        <input type="button" value=" Find the selected value for each group " onclick="getValues()" />
    </div>
</body>
</html>