<script src="/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#selall").bind("click", function () {
            var ked = document.getElementById("selall").checked;
            var valID ="";
            if(ked){
                $("[name = checkBoxName]:checkbox").each(function () {
                    this.checked = true;
                    if($(this).attr("value") != ""){

                        if(valID == ""){
                            valID = $(this).attr("value");
                        }else{
                            valID = valID+","+$(this).attr("value");
                        }
                    }
                });
                $('#value').attr("value",valID);
            }else{
                $("[name = checkBoxName]:checkbox").each(function () {
                    this.checked = false;
                });
                $('#value').attr("value","");
            }

        });

//Click the sub box ,change the selected value.
        $("[name=checkBoxName]:checkbox").bind("click",function(){
            $('#selall').attr("checked",false);
            $(this).checked = false;
            var valID = "";
            $("[name=checkBoxName]:checkbox").each(function(){
                if(this.checked){
                    if($(this).attr("value") != ""){
                        if(valID == ""){
                            valID = $(this).attr("value");
                        }else{
                            valID = valID+","+$(this).attr("value");
                        }
                    }
                }
            });
            $('#value').attr("value",valID);
        });
    });


</script>



<div>
    <input name="checkBoxName1" type="checkbox" id="selall" value="" /><br>
            <input name="checkBoxName" type="checkbox" value="1" />
            <input name="checkBoxName" type="checkbox" value="2" />
            <input name="checkBoxName" type="checkbox" value="3" />
            <input name="checkBoxName" type="checkbox" value="4" />
            <input name="checkBoxName" type="checkbox" value="5" />
            <input name="checkBoxName" type="checkbox" value="6" />
            <input name="checkBoxName" type="checkbox" value="7" />
    <input type="text" id="value" value=""/>
        </div>