<li>WSN
<ul>
<li><input type="checkbox" id="value" value="wsn/qabala.php" onchange="getline();" onclick="boxclick(this,'qabala')" /> Qabala</li>
<li><input type="checkbox" id="value" value="wsn/ismailli.php" onchange="getline();" onclick="boxclick(this,'ismailli')" /> Ismayilli</li>
<li><input type="checkbox" id="value" value="wsn/agshu.php" onchange="getline();" onclick="boxclick(this,'aghsu')" /> Aghsu</li>
<li><input type="checkbox" id="value" value="wsn/shamakhi.php" onchange="getline();" onclick="boxclick(this,'shamakhi')" /> Shamakhi</li>
<li><input type="checkbox" id="value" value="wsn/shabran.php" onchange="getline();" onclick="boxclick(this,'shabran')" /> Shabran</li>
<li><input type="checkbox" id="value" value="wsn/siyazan.php" onchange="getline();" onclick="boxclick(this,'siyazan')" /> Siyazan</li>
<li><input type="checkbox" id="value" value="wsn/jalilabad.php" onchange="getline();" onclick="boxclick(this,'jalilabad')" /> Jalilabad</li>
<li><input type="checkbox" id="value" value="wsn/masalli.php" onchange="getline();" onclick="boxclick(this,'masalli')" /> Masalli</li>
<li><input type="checkbox" id="value" value="wsn/lerik.php" onchange="getline();" onclick="boxclick(this,'lerik')" /> Lerik</li>
<li><input type="checkbox" id="value" value="wsn/yardimli.php" onchange="getline();" onclick="boxclick(this,'yardimli')" /> Yardimli</li>
</ul>
I have changed it. It works but I get only first data. Why is this? [only wsn/qabala.php]
id must be unique if you are calling with id
script
<script type="text/javascript">
function boxclick(checkvalue,str,chk)
{
var lfckv = document.getElementById(chk).checked
alert(lfckv)
alert(checkvalue);
alert(str);
if(lfckv)
{
//code on checked
}
else
{
//code on unchecked
}
}
</script>
html
<ul>
<li><input type="checkbox" id="value1" value="wsn/qabala.php" onclick="boxclick(this.value,'qabala','value1')" /> Qabala</li>
<li><input type="checkbox" id="value2" value="wsn/ismailli.php" onclick="boxclick(this.value,'ismailli','value2')" /> Ismayilli</li>
<li><input type="checkbox" id="value3" value="wsn/agshu.php" onclick="boxclick(this.value,'value3')" /> Aghsu</li>
<li><input type="checkbox" id="value4" value="wsn/shamakhi.php" onclick="boxclick(this.value,'shamakhi','value4')" /> Shamakhi</li>
<li><input type="checkbox" id="value5" value="wsn/shabran.php" onclick="boxclick(this.value,'shabran','value5')" /> Shabran</li>
<li><input type="checkbox" id="value6" value="wsn/siyazan.php" onclick="boxclick(this.value,'siyazan','value6')" /> Siyazan</li>
<li><input type="checkbox" id="value7" value="wsn/jalilabad.php" onclick="boxclick(this.value,'jalilabad','value7')" /> Jalilabad</li>
<li><input type="checkbox" id="value8" value="wsn/masalli.php" onclick="boxclick(this.value,'masalli','value8')" /> Masalli</li>
<li><input type="checkbox" id="value9" value="wsn/lerik.php" onclick="boxclick(this.value,'lerik','value9')" /> Lerik</li>
<li><input type="checkbox" id="value10" value="wsn/yardimli.php" onclick="boxclick(this.value,'yardimli','value10')" /> Yardimli</li>
</ul>
you can call it with function as you are mentioned
boxclick(this.value)
id must be unique for you to reference the control.
because all of your IDs are 'value' it is just returning the first one.
Related
When I click parent 1 check allbutton all the child should be slected based on parent id. I have more number of parent each parent have individual id's. How can I do it. I tried some codes its not working. anyone help me on this. Thank you.
<div>
<input type="checkbox" id="choice_5621_1"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2"> Parent 2 check all <br />
<input type="checkbox" id="choice_5621_2_1"> <br />
<input type="checkbox" id="choice_5621_2_2"> <br />
<input type="checkbox" id="choice_5621_2_3">
</div>
As you have wrapped all your inputs in a div, you can use .nextAll()
// I gave the parent a checkall class just for demo cos not sure what your initial selector is:
$('.checkall').on('change', function() {
$(this).nextAll('input').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
Here is the solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<ul>
<li>
<input type="checkbox" name="choice_5621_1"> Parent 1 check all</input>
<ul>
<li><input type="checkbox" name="choice_5621_1_1">Child 1</input></li>
<li><input type="checkbox" name="choice_5621_1_2">Child 1</input></li>
<li><input type="checkbox" name="choice_5621_1_3">Child 1</input></li>
<li><input type="checkbox" name="choice_5621_1_4">Child 1</input></li>
</ul>
</li>
<li>
<input type="checkbox" name="choice_5621_2"> Parent 2 check all </input>
<ul>
<li><input type="checkbox" name="choice_5621_2_1">Child 2</input></li>
<li><input type="checkbox" name="choice_5621_2_2">Child 2</input></li>
<li><input type="checkbox" name="choice_5621_2_3">Child 2</input></li>
<li><input type="checkbox" name="choice_5621_2_4">Child 2</input></li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
$('input[name="choice_5621_1"]').bind('click', function () {
$('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
});
$('input[name="choice_5621_2"]').bind('click', function () {
$('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked')));
});
});
</script>
i guess You need to use the attribute starts with selector, like this:
$('div[id^="choice_5621_2_"]').prop('checked', true);
You can use the siblings selector of jQuery and select all checkboxes which are at same level.
$('.checkall').on('click', function() {
$(this).siblings('input').prop('checked', this.checked);
});
//Also making sure if any of the level2 checkbox is unchecked, then uncheck the main checkbox too.
$('.level2').on('click', function() {
$(this).siblings('.checkall').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1" class="checkall"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1" class="level2"> <br />
<input type="checkbox" id="choice_5621_1_2" class="level2"> <br />
<input type="checkbox" id="choice_5621_1_3" class="level2">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2" class="checkall"> Parent 2 check all
<br />
<input type="checkbox" id="choice_5621_2_1" class="level2"><br />
<input type="checkbox" id="choice_5621_2_2" class="level2"><br />
<input type="checkbox" id="choice_5621_2_3" class="level2">
</div>
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements. The .parents() and .closest() methods are similar in that they both traverse up the DOM tree
$("#choice_5621_2 , #choice_5621_1").on("click",function(){
$(this).closest("div" ).find("input[type='checkbox']").not($(this)).prop("checked",$(this).is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2"> Parent 2 check all <br />
<input type="checkbox" id="choice_5621_2_1"> <br />
<input type="checkbox" id="choice_5621_2_2"> <br />
<input type="checkbox" id="choice_5621_2_3">
</div>
$(document).ready(function() {
$(".parent").on("click", function(){
$(this).parent().find(":checkbox").prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="choice_5621_1" class="parent"> Parent 1 check all
<br />
<input type="checkbox" id="choice_5621_1_1"> <br />
<input type="checkbox" id="choice_5621_1_2"> <br />
<input type="checkbox" id="choice_5621_1_3">
</div>
<br /> <br />
<div>
<input type="checkbox" id="choice_5621_2" class="parent"> Parent 2 check all <br />
<input type="checkbox" id="choice_5621_2_1"> <br />
<input type="checkbox" id="choice_5621_2_2"> <br />
<input type="checkbox" id="choice_5621_2_3">
</div>
But perhaps you should toggle them.
edit toggle, like in Pete's answer! and use the nextall instead of parent like I did.
I have 10 checkboxes and as an example i checked only two of them and i need to create a button to check the another 8 box and uncheck the other two (that already checked before) How i can do this?
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
here simple example for your code
$('input.check11').click(function(){
$('input.check21').prop('checked',this.checked)
$('input.check22').prop('checked', false)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" name="discounting" class="check11" value="">all</span><br>
</label>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" checked name="discounting" class="check22" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
<label>
<span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
</label>
</div>
</div>
</form>
I thing the best approach is to add class to every checkbox that you want to invert, and for each checkbox with that class invert 'checked' property
$('button').on('click', function(){
$('.invert').each(function(){
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
$(document).ready(function(){
$('#button').click(function(){
$('input[type="checkbox"]').each(function(){
if($(this).prop("checked") == true){
$(this).prop('checked', false);
}
else if($(this).prop("checked") == false){
$(this).prop('checked', true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<input type="button" id="button" value="click">
Please check the Code will help you out
thanks
$(document).ready(function () {
$('#btnClick').click(function () {
$('input[type="checkbox"]').each(function () {
var $this = $(this);
$this.prop('checked', !$this.prop('checked'));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<br />
<input type="button" id="btnClick" value="Click" >
Check This answer , you need to loop in all check box and vice versa check
$('#copyButton2').on('click',function(){
$('#AllCheckbox input').each(function(){
$(this).prop('checked', !$(this).prop("checked"));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='AllCheckbox'>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
</div>
<button id="copyButton2">CheckOther</button>
I am trying to select multiple checkboxes when previous one is checked.
Currently the first set of checkboxes is working fine. But when I select second checkbox the attached checkboxes should be selected instead of the first checkbox set.
html code
<acronym>
<input name="" type="checkbox" class="OverFlowCheckbox" value="">
<div class="Selectionlist">
<div class="percentageBox color2"> </div><span>Hus og hjem</span></div>
<div class="_user_auth">
<ul class="selectCheckBox">
<li><input type="checkbox" id="checkbox1" class="css-checkbox" checked="checked"/><label for="checkbox1" class="css-label lite-red-check">Boligalarm</label></li>
<li><input type="checkbox" id="checkbox2" class="css-checkbox" checked="checked"/><label for="checkbox2" class="css-label lite-red-check">Forsikring</label></li>
<li><input type="checkbox" id="checkbox3" class="css-checkbox" checked="checked"/><label for="checkbox3" class="css-label lite-red-check">Lån</label></li>
<li><input type="checkbox" id="checkbox5" class="css-checkbox" checked="checked"/><label for="checkbox5" class="css-label lite-red-check">Eiend. megler</label></li>
<li><input type="checkbox" id="checkbox6" class="css-checkbox" checked="checked"/><label for="checkbox6" class="css-label lite-red-check">Telecom</label></li>
<li><input type="checkbox" id="checkbox4" class="css-checkbox" checked="checked"/><label for="checkbox4" class="css-label lite-red-check">Varmepumpe</label></li>
<li><input type="checkbox" id="checkbox5" class="css-checkbox" checked="checked"/><label for="checkbox5" class="css-label lite-red-check">Annet</label></li>
</ul>
</div>
</acronym>
<acronym>
<input name="" type="checkbox" class="OverFlowCheckbox" value="">
<div class="Selectionlist">
<div class="percentageBox color3"></div><span>Bil og båt</span></div>
<div class="_user_auth">
<ul class="selectCheckBox">
<li><input type="checkbox" id="checkbox1" class="css-checkbox" checked="checked"/><label for="checkbox1" class="css-label lite-red-check">Bilverksted</label></li>
<li><input type="checkbox" id="checkbox2" class="css-checkbox" checked="checked"/><label for="checkbox2" class="css-label lite-red-check">Båtverksted</label></li>
<li><input type="checkbox" id="checkbox3" class="css-checkbox" checked="checked"/><label for="checkbox3" class="css-label lite-red-check">Dekk</label></li>
<li><input type="checkbox" id="checkbox5" class="css-checkbox" checked="checked"/><label for="checkbox5" class="css-label lite-red-check">Annet bil</label></li>
<li><input type="checkbox" id="checkbox6" class="css-checkbox" checked="checked"/><label for="checkbox6" class="css-label lite-red-check">Annet båt</label></li>
</ul>
</div>
</acronym>
java script code
$(document).ready(function(){
$('acronym .OverFlowCheckbox').click(function(){
if ($(this).is(':checked')) {
$('._user_auth').first().fadeIn('slow');
}
else
{
$('._user_auth ').fadeOut('slow');
}
});
});
current online jsfiddle code
You can use $(this).parent().find('._user_auth') to find the list under the current element.
JSFiddle demo of the code
$(document).ready(function () {
$('acronym .OverFlowCheckbox').click(function () {
var chkList = $(this).parent().find('._user_auth').first();
if ($(this).is(':checked')) {
chkList.fadeIn('slow');
} else {
chkList.fadeOut('slow');
}
});
});
$(document).ready(function(){
$('acronym .OverFlowCheckbox').click(function(){
if ($(this).is(':checked')) {
$(this).next().next().fadeIn('slow');
} else {
$(this).next().next().fadeOut('slow');
}
});
});
You can traverse to closest element acronym and then find div._user_auth in it :
$('acronym .OverFlowCheckbox').click(function(){
if ($(this).is(':checked')) {
$(this).closest('acronym').find('._user_auth').fadeIn('slow');
} else {
$(this).closest('acronym').find('._user_auth').fadeOut('slow');
}});
Working Demo
So I have a group of checkboxes, for example:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Now I have an array of values:
var values = ["2", "4", "7", "8"];
Now how do I end up with my group of checkboxes to look like this:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" />
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" />
Will I have to use two for-loops to do this? Is there a way in plain javascript or jquery that doesn't involve having to loop twice?
API docs demo
var values = ["2", "4", "7", "8"];
$('input[name="cbl"]').val(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Create a selector from the array, and check them all
$( '#cbl' + values.join(', #cbl') ).prop('checked', true);
FIDDLE
This is using the ID's, as that's a better way to select the elements than the values, if you still want to use the values, you can use the same concept
$( '[value="' + values.join('"], [value="') + '"]').prop('checked', true);
FIDDLE
or you can filter
$('input[type="checkbox"]').filter(function() {
return $.inArray(this.value, values) != -1;
}).prop('checked', true);
I have the following group of checkboxes, and if a box is checked I want the value of the checkbox 'copied' to a hidden text field. So if the first, third and seventh box are checked the value of the hidden text field would be 1,3,7
I found this solution but that only adds one value to the textfield.
<input id=myhidden value="">
<div class="btn-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
Tags <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-form" role="menu">
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="1"> Lokaal</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="2"> Nationaal</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="3"> Beide</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="4"> Onbekend</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="5"> Lokale partij</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="6"> CDA</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="7"> VVD</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="8"> D66</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="9"> PvdA</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="10"> SP</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="11"> GroenLinks</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="12"> ChristenUnie</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="13"> SGP</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="14"> PVV</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="15"> Partij voor de Dieren</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="16"> Overige landelijke partij</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="17"> Politieke actor</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="18"> Pers</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="19"> Kiezer</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="20"> tweet</li>
<li><input class="checkbox" id="tagCheckbox" name="tags[]" type="checkbox" value="21"> user</li>
</ul>
</div>
and the JS I tried
$('input[type="checkbox"]').change(function(){
$('#myhidden').val($(this).val());
});
How do I do this?
Update: And when a checkbox is unchecked the value should be removed.
With this simple code, you can do it :
//Bind change event
$('.checkbox').on('change', function(){
//Select every checked input and build an array
var values = $('.checkbox:checked').map(function(){
//Return the value for the array
return this.value;
}).get();
//Set the new val to you input
$('#hiddenValue').val(values.join(','));
//See the result
console.log($('#hiddenValue').val())
});
Fiddle
You need to add one hidden field, and use the following code in the document ready event of jQuery.
Javascript
$(".checkbox").change(function(){
var oChecked = new Array();
$(".checkbox").each(function(index, val){
if($(val).is(":checked"))
oChecked.push($(val).val());
});
$("#hdnData").val(oChecked.join());
});
Html
<input type="hidden" id="hdnData" />
You can check it here http://jsfiddle.net/iamrmin/V2B6g/
I have also append the checked IDs to textarea so that you can feel the correctness.
I made this fiddle for you. Every time you click a checkbox, it will alert the result, which you can assign to your hidden field. Here is a code:
$('.checkbox').click(function() {
var result = "";
$('.checkbox').each(function() {
if ( this.checked ) {
if ( result.length > 0 ) {
result+=",";
}
result+=this.value;
}
});
alert("Assign value of your hidden field: " + result);
});