Count number of selected checkboxes and display value in appropriate position

Question

I would like to count the number of selected checkboxes from a list, and then display the number of checkboxes selected next to the corresponding divs. Ie if the user selects 3 option from the Dogs list, 2 from the Birds list and 1 from the reptile list the 'x' next to the buttons get replaced by 3, 2, and 1 respectively, rather than getting 6 next to Dogs, as I am currently getting. I have tried to follow this question How to count every checked checkboxes

JS fiddle example

https://jsfiddle.net/j2dypbhc/8/

HTML

<div id="type1" class="type">
    <h3>1.2 Select material v1</h3>

    <span id="value">x</span>
    <button class="bob" type="button" name="material" value="1">Dogs</button>

    <span id="value">x</span>
    <button class="bob" type="button" name="material" value="2">Birds</button>                  

    <span id="value">x</span>
    <button class="bob" type="button" name="material" value="3">Reptiles</button>                       
</div>
<div id="material1" class="material">
    <input  class="select_all" type="checkbox" name="tile[]" value="1">Pugs
    <input  class="select_all" type="checkbox" name="tile[]" value="2">Boxer
    <input clas="select_all" type="checkbox" name="tile[]" value="3">Dalmation
</div>
<div id="material2" class="material">
    <input  class="select_all" type="checkbox" name="tile[]" value="4">Eagle
    <input  class="select_all" type="checkbox" name="tile[]" value="5">Swan
    <input clas="select_all" type="checkbox" name="tile[]" value="6">Budgie
</div>
<div id="material3" class="material">
    <input  class="select_all" type="checkbox" name="tile[]" value="7">Snake
    <input  class="select_all" type="checkbox" name="tile[]" value="8">Lizard
    <input clas="select_all" type="checkbox" name="tile[]" value="9">Iguana
</div>

On click it should count the number of checkboxes selected. I have made it that far. The issue I am having is to separate the count by type. — ChriChri, Jan 12 '16 at 13:13

score 1 · Answer 1 · answered Jan 12 '16 at 13:13

Firstly you have many duplicate id attributes which is invalid. You should change these to classes.

The actual you have issue is because the logic in the updateCounter() function is flawed. You need to count only the checked boxes within the .material div which is related to the button which showed them. You then need to traverse the DOM to find the related .value element and update its text(). Try this:

$(document).ready(function() {
    $(".bob").click(function() {
        var divname = this.value;
        $(this).addClass("active")
        $("#material" + divname).show().siblings('.material').hide();
    });
    $('#value').text('');

    $("#general-content input:checkbox").on("change", updateCounter);
})

function updateCounter() {
    var $material = $(this).closest('.material');
    var $value = $(".value").eq($material.index('.material'));
    var len = $material.find("input[name='tile[]']:checked").length;
    $value.text(len > 0 ? '(' + len + ')' : 'x');
}

Updated fiddle

No problem, glad to help. – Rory McCrossan Jan 12 '16 at 13:17 — Rory McCrossan, Jan 12 '16 at 13:17

score 1 · Accepted Answer · answered Jan 12 '16 at 13:19

That's would work for you ) Also i've removed some typo in your html.

$(".select_all").change(function(){
  var selectedTypeCount = $("input[name='" + $(this).attr('name') + "']:checked").length;
  $("[id*=" + $(this).attr('name') + "]").html(selectedTypeCount);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="type1" class="type"><h3>1.2 Select material v1</h3>
                            <span id="dogsCount">x</span><button class="bob" type="button" name="material" value="1">Dogs</button>
                            <span id="birdsCount">x</span><button  class="bob" type="button" name="material" value="2">Birds</button>                    <span id="reptilesCount">x</span><button  class="bob" type="button" name="material" value="3">Reptiles</button>                       </div>


              <div id="material1" class="material">
                            <input  class="select_all" type="checkbox" name="dogs" value="1">Pugs
                            <input  class="select_all" type="checkbox" name="dogs" value="2">Boxer
                            <input class="select_all" type="checkbox" name="dogs" value="3">Dalmation
                        </div>
                        <div id="material2" class="material">
                                <input  class="select_all" type="checkbox" name="birds" value="4">Eagle
                            <input  class="select_all" type="checkbox" name="birds" value="5">Swan
                            <input class="select_all" type="checkbox" name="birds" value="6">Budgie
                        </div>
                        <div id="material3" class="material">
                            <input  class="select_all" type="checkbox" name="reptiles" value="7">Snake
                            <input  class="select_all" type="checkbox" name="reptiles" value="8">Lizard
                            <input class="select_all" type="checkbox" name="reptiles" value="9">Iguana
                        </div>

Count number of selected checkboxes and display value in appropriate position

2 Answers2