I have multiple panels (class="panel-section) and I was to count the number of checked check-boxes in each and display this number in each panel, and have this number update when there is a check-box change. This is my HTML code:
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 1
<span id="layer_group_1_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_1">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible10">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_1 -->
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 2
<span id="layer_group_2_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_2">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_2 -->
And I can get the number of total check-boxes that are active using the following:
//Get the number of total layers active
$(document).ready(function () {
$("input[type=checkbox]").each(function () {
$(this).change(updateCount);
});
updateCount();
function updateCount () {
var count = $("input[type=checkbox]:checked").size();
$("#count_checkboxes").text(count);
$("#status").toggle(count > 0);
};
});
But instead of just "#count_checkboxes" I want the id from the panel-section-main div to join with it so I can pass the number to the right section (eg "#layer_group_1_count_checkboxes").
I may not be going about this the best way so also open to better ideas people may have. This is an example of the output I want:
Aucun commentaire:
Enregistrer un commentaire