ブートストラップと JQuery を使用すると、次のように実現できます。
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xs-2">
<input id="ccomplete" class="form-control" type="checkbox" />
</div>
</div>
<div id="main" class="row">
<input class="form-control" type="checkbox" />
</div>
</div>
完全なコードを含む JSFiddleデモを次に示します。
このような操作については、javascript/jquery を学習することをお勧めします。
上記のデモでは、JQueryおよびBootstrapフレームワークを使用しています。