html:
<div> <p> <input type="checkbox" name="checkbox" id="all">all <br> <input type="checkbox" name="checkbox1" class="subcheck">A <input type="checkbox" name="checkbox1" class="subcheck"> B <input type="checkbox" name="checkbox1" class="subcheck">C </p> <p> <input type="checkbox" name="checkbox1" class="subcheck">D <input type="checkbox" name="checkbox1" class="subcheck">E <input type="checkbox" name="checkbox1" class="subcheck">F </p> </div>
script:
$(function(){ $("#all").click(function(){ if($(".subcheck:checked").length > 0){ $(".subcheck").each(function(){ $(this).prop("checked",false); }) $(this).prop("checked",false); }else{ $(".subcheck").each(function(){ $(this).prop("checked",true); }) $(this).prop("checked",true); } //alert($(".subcheck:checked").length); }) $(".subcheck").click(function(){ //alert($(".subcheck:checked").length); if($(".subcheck:checked").length > 0 && $(".subcheck:checked").length < $(".subcheck").length){ if($("this").prop("checked")){ $("this").prop("checked",false); }else{ $("this").prop("checked",true); } var allBox = document.getElementById("all"); allBox.indeterminate =true; }else if($(".subcheck:checked").length == 0){ if($("this").prop("checked")){ $("this").prop("checked",false); }else{ $("this").prop("checked",true); } var allBox = document.getElementById("all"); allBox.indeterminate =false; $("#all").prop("checked",false); }else if( $(".subcheck:checked").length == $(".subcheck").length){ if($("this").prop("checked")){ $("this").prop("checked",false); }else{ $("this").prop("checked",true); } var allBox = document.getElementById("all"); allBox.indeterminate =false; $("#all").prop("checked",true); } }) });