View Full Version : jQuery - count checkboxes same value

11-12-2010, 01:31 PM
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)


<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:


Not sure what the correct logic should be.

Anyone with any ideas? :)

Philip M
11-12-2010, 02:51 PM
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.

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)
Quizmaster: What R is a dish said to be best served cold?
Contestant: Toast.

11-12-2010, 03:13 PM
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?


Philip M
11-13-2010, 12:00 PM

<style type = "text/css">
.cty {color:red;font-weight:bold};


<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)"/>
<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)" />
<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)"/>

<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;