Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts

    jQuery - count checkboxes same value

    Hey Guys,

    I am stuck on something that is probably a straight forward issue. Just can't get my head around it.

    Basically I have a whole bunch of checkboxes and I want to count the number that have the same class (only when selected)

    Example:

    Code:
    <input type="checkbox" name="Paris" value="FR" />
    <input type="checkbox" name="Marseille" value="FR" />
    <input type="checkbox" name="Cardiff" value="UK" />
    <input type="checkbox" name="London" value="UK" />
    <input type="checkbox" name="ROME" value="IT" />
    When user checks a checkbox, output the number of checked boxes that have the same value.

    My thoughts:

    Code:
    $("input[type="checkbox"]").click(function(event){
         alert($('input[type="checkbox"]:checked').val($('input[type="checkbox"]:checked').val()).length);
    });
    Not sure what the correct logic should be.

    Anyone with any ideas?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Is this what you want?

    There are many possibilities here. The idea of this method is to include all the details in the checkbox value separated by a delimiter (here ~) and then use split("~") to a capture the sub-divisions in an array. You can then manipulate or display them at will. But as I say there are many possible varaitions and other ways to do this.


    Code:
    Paris <input type="checkbox" name="Paris" value="Paris~0~2" onclick = "show(this.value)"/>
    Marseille<input type="checkbox" name="Marseille" value="Marseille~0~2" onclick = "show(this.value)"/>
    Cardiff<input type="checkbox" name="Cardiff" value="Cardiff~1~3" onclick = "show(this.value)" />
    London<input type="checkbox" name="London" value="London~1~3" onclick = "show(this.value)" />
    Manchester <input type="checkbox" name="Manchester" value="Manchester~1~3" onclick = "show(this.value)" />
    Rome<input type="checkbox" name="Rome" value="Rome~2~1" onclick = "show(this.value)"/>
    
    <script type = "text/javascript">
    function show(which) {
    var countries = ["France","UK","Italy"];
    var wsplit=[];
    wsplit = which.split("~");
    var city = wsplit[0];  // city
    var ca = wsplit[1];  // country index
    var cb = countries[ca];  // country name
    var des = wsplit[2];  // number of destinations
    alert ("You have chosen " + city + ".  There are a total of " + des + " destinations in country " + cb)
    }
    </script>
    Quizmaster: What R is a dish said to be best served cold?
    Contestant: Toast.

  • #3
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Hmm, thats got me thinking about using an array but what I was after was only counting the countries of only the selected Items.

    For example, if there were 3 checkboxes, all with UK country code but only two were selected, then it would output 2.

    Can that be done via your method mentioned above?

    Ta

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Code:
    <html>
    <head>
    
    <style type = "text/css">
    .cty {color:red;font-weight:bold};
    </style>
    
    <body>
    
    <form name= "myform">
    <span class = cty>France</span><br>
    &nbsp&nbsp Paris <input type="checkbox" name = "box" id="Paris" value="Paris~0" onclick = "show(this)"/>
    Lyon <input type="checkbox" name = "box" id="Lyon" value="Lyon~0~3" onclick = "show(this)"/>
     Marseille<input type="checkbox" name = "box" id="Marseille" value="Marseille~0" onclick = "show(this)"/>
    <br>
    <span class = cty>UK</span><br>
    &nbsp&nbsp Cardiff<input type="checkbox" name = "box" id="Cardiff" value="Cardiff~1" onclick = "show(this)" />
    London<input type="checkbox" name = "box" id="London" value="London~1" onclick = "show(this)" />
    Manchester <input type="checkbox" name = "box" id="Manchester" value="Manchester~1" onclick = "show(this)" />
    Blackpool<input type="checkbox" name = "box" id="Blackpool" value="Blackpool~1" onclick = "show(this)" />
    York<input type="checkbox" name = "box" id="York" value="York~1" onclick = "show(this)" />
    <br>
    <span class = cty>Italy</span><br>
    &nbsp&nbsp Rome<input type="checkbox" name = "box" id ="Rome" value="Rome~2" onclick = "show(this)"/>
    Milan<input type="checkbox" name = "box" id ="Milan" value="Milan~2" onclick = "show(this)"/>
    </form>
    
    <div id = "message"></div>
    
    <script type = "text/javascript">
    function show(which) {
    var val = which.value;
    var boxID = which.id;
    var countries = ["France","UK","Italy"];  // as many countries as desired (no , after last item)
    var numdests = [3,5,2];  // number of destinations to each country
    var wsplit=[];
    wsplit = val.split("~");
    var city = wsplit[0];  // city
    var ca = wsplit[1];  // country index 
    var cb = countries[ca];  // country name
    var des = numdests[ca];  // number of destinations to this country
    if (document.getElementById(boxID).checked) {var chk = true} // was last box checked or unchecked?
    else {var chk = false}
    
    var selected = [0,0,0];
    var selsplit = [];
    for (var i=0;i<document.myform.box.length;i++)	{
    if (document.myform.box[i].checked) {
    var sel = document.myform.box[i].value;
    selsplit = sel.split("~");
    var ca = selsplit[1];  // country index
    selected[ca] ++;  // count number of boxes checked for each country
    }
    }
    
    var msg = "You have";
    (chk? d=" selected " : d=" de-selected ");
    msg += d + city  + "<br>";
    msg += "There are a total of " + des + " destinations available in " + cb + "<br><br>";
    
    for (var i =0; i<countries.length; i++) {
    (selected[i]==1? d=" destination " : d=" destinations ");
    msg += "You have chosen " + selected[i] + d + " from " + countries[i] + "<br>";
    }
    
    document.getElementById("message").innerHTML = msg; 
    
    }
    </script>
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •