var _html = '<div class="list"><label><input type="checkbox" checked class="selectAll"> Countries</label>'; var _list = ['USA','India','China','England','Japan']; for ( var i = 0; i < _list.length; i++ ) { _html += '<div class="checkbox"><label><input type="checkbox" checked class="checkbox" value="' + _list[i] + '"/>' + _list[i] + '</label></div>'; } _html += '</div>' $('.wrapper').after(_html); //select all and deselect all disease checkbox $('.selectAll').change(function(){ $(".checkbox").find(':checkbox').prop("checked", this.checked); }); $(".checkbox").change(function(){ var _totalChecked = $('.checkbox').find('input:checked').length; if(_totalChecked == _list.length){ $(".selectAll").prop("checked", true); }else{ $(".selectAll").prop("checked", false); } });
<div class="wrapper"></div>