Sjay Sjay - 6 months ago 16
HTML Question

Dynamically Change select option when checkboxes are selected

Changing the select options on clicking check boxes, i have list of 8 check boxes dynamically it counts checked check boxes for example if i click on 1 check box it will show Number Of Credits Selected : 1 , and if i click on 2 check boxes it will show Number Of Credits Selected : 2 and soon,

below the check boxes i have select options i want dynamically change of select option when check boxes are checked
example : if i click on two check boxes my select option should change to 2 selected and so on.

can somebody help me out in achieving it!

thanks!

Here is an demo example http://jsfiddle.net/Qac6J/552/

HTML

<div class="container" >
<table class="table table-striped">
<tr>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
<td align="center">
<div class="checkbox">
<label>
<input type="checkbox" value="1" class="no_of_credits">
</label>
</div>
</td>
</tr>
</table>
</div>
<div class="container">
<div class="row">
<div class="text-center">
<h1 class="print_no_of_credits">Number Of Credits Selected : 0</h1>

</div>
</div>
</div>
</div>

<form class="form-group">
<select class="form-control">
<option value="1 selected">1 selected</option>
<option value="2 selected">2 selected</option>
<option value="3 selected">3 selected</option>
<option value="4 selected">4 selected</option>
<option value="5 selected">5 selected</option>
<option value="6 selected">6 selected</option>
<option value="7 selected">7 selected</option>
<option value="8 selected">8 selected</option>
<option value="9 selected">9 selected</option>
<option value="10 selected">10 selected</option>
<option value="11 selected">11 selected</option>
<option value="12 selected">12 selected</option>
</select>
</form>


JQUERY

$(document).ready(function()
{
$('input[type="checkbox"]').click(function()
{
var total = ($('.no_of_credits:checked').length)+0;
$(".print_no_of_credits").html( "<h1>Number Of Credits Selected : "+total+"</h1>" ).length;
});

});

Answer

Just add the below line to your click event

$('.form-control').val(total + " selected");

So your updated code would be:

$('input[type="checkbox"]').click(function() {
    var total = ($('.no_of_credits:checked').length) + 0;
    $(".print_no_of_credits").html("<h1>Number Of Credits Selected : " + total + "</h1>").length;
    $('.form-control').val(total + " selected");
});

UPDATED FIDDLE

Update


You can modify your var total calculation as

var total=$('.no_of_credits:checked').length