Well I have a page (view) that does a select from the database and returns the images to the user to select a limit of photos determined by the administrator more wanted to count and show the user how many photos he can still select, that is, when he selects an image (a checkbox) it subtracts 1 from the border and vice versa, I will leave the view code for you to understand better
<div class="tab-content">
<div class="tab-pane active" id="select">
<h4 class="info-text"> Selecione suas <b id="contafotos">10</b> fotos: </h4>
<div class="row">
<?php foreach ($for_fotos as $dados) : ?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url($dados['path'].'/'.$dados['nome']); ?>" alt="<?php echo $dados['nome'] ?>">
<div class="caption">
<p>
<div class="checkbox">
<label>
<input class="limited" type="checkbox" value="">
Selecionar
</label>
</div>
</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<input type='submit' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' value='PRÓXIMO' />
<!--<input type='button' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='Finish' />-->
</div>
<div class="pull-left">
<?php echo anchor('selecao/voltar', 'Voltar', 'class="btn btn-previous btn-fill btn-default btn-wd btn-sm"'); ?>
</div>
<div class="clearfix"></div>
</div>
<?php echo form_close(); ?>
</div>
<script type="text/javascript">
var selec = 10;
$('input[type=checkbox]').on('change', function () {
var total = $('input[type=checkbox]:checked').checked;
if ($('input[type=checkbox]:checked')) {
//$(this).attr("checked")=="checked"
selec--;
}
$("#contafotos").html(selec);
});
</script>