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
Related
HTML:
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
jQuery:
$(".color").click(function(){
console.log($(".color:not(:checked)").val());
})
My code is working but it displaying only one element. How can I resolve this error?
You can use following script for this, Updated Fiddle
$(".color").change(function(){
$(".color").each(function(){
if (!$(this).prop("checked")) {
alert($(this).val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
#super-user has provided a perfectly acceptable answer but you could streamline this further by using the jQuery map() function to translate the array and then use join() to output the result as a string.
$(".color").click(function(){
$("p").text(jQuery.map($(".color:not(:checked)"), function(val, index) {
return $(val).val();
}).join(","));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
<p></p>
$("input[name='color[]']").each( function () {
if ($(this).is(":checked"))
{
}
else
{
}
});
I have this script. Everything is working except I need to make it work with multi-able items. The first set of work perfectly, but I can seam to replicate it on the second and third set of check boxes.
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales" >Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2" >Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3" >Item 3</label>-->
<hr />
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Please can anyone help?
Many thanks in advance.
remove checkBoxes() method and replace the last event handlers as (check this fiddle)
//put the event handler directly on the checkboxes inside the section
$( "section input[type='checkbox']" ).on("change", function()
{
console.log( $( this ) );
//get the handle to the parent section
var $parentSection = $( this ).parent();
//compare the number of checked checkboxes with total one
if( $parentSection.find( "input[type='checkbox']:checked" ).length == $parentSection.find( "input[type=checkbox]" ).length )
{
$parentSection.prev().prev().prop("checked", true);
//write checkall's textbox id
$("#checked").append( "<h3>" + $parentSection.prev().prev().attr( "id" ) + "</h3>");
}
else
{
$parentSection.prev().prev().prop("checked", false);
//write each and every checked box's text
$parentSection.find("input[type='checkbox']:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});
Following code snippet should fulfill your requirements. Hope this will help you.
var checkedDiv = $("#checked");
$('input[type=checkbox]').on('change', function() {
if (this.className == 'checkall') {
var section = $(this).nextAll('section:first');
section.find('input[type=checkbox]').prop('checked', this.checked);
} else {
var parentSection = $(this).parent();
var checkall = parentSection.prevAll(".checkall:first")
var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length;
checkall.prop("checked", isEqual);
}
checkedDiv.html('');
$('.checkall').each(function() {
if (this.checked) {
checkedDiv.append('<h3>' + this.id + '</h3><br/>');
} else {
var section = $(this).nextAll('section:first');
section.find("input[type=checkbox]:checked").each(function() {
checkedDiv.append($(this).next().text() + "<br>");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked"></div>
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);
});
Okay, so I have a bit of a problem. I have some code, the JS works (at least with the non-CSS modified version), but it fails with the CSS modified version. Wondering if anyone can lend me some help to figure out what went wrong with the implementation of the CSS...
What I want to have happen, is the any of the first 4 chekboxes, if checked, disable all others. But, if any of the other checkboxes (numbers 5 and up) are checked, none are disabled (unless of course someone checks one of the first four).
My JavaScript:
<script type="text/javascript">
$(window).load(function(){
var $inputs = $('input[type=checkbox]', $('#test'));
var $inputs2 = $('input[type=checkbox]', $('#test2'));
$inputs.change(function(){
var $this = $(this);
$inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs.not(this).prop('checked',false);
}
});
$inputs2.change(function(){
var $this = $(this);
$inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));
if($this.index() < 4 && this.checked){
$inputs2.not(this).prop('checked',false);
}
});
});
The first Div:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr>
</table>
</div>
My CSS, if needed:
<style>
#Error {display: none;}
input[type=checkbox].css-checkbox {display:none;}
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;}
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;}
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;}
.css-label{ background-image:url(web-two-style.png);}
</style>
The problem is: the following works, and the following was later modified with CSS and I can't figure out what went wrong.
What works:
<div id='test'>
<input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</div>
It gets even odder when I add the code that worked to the same div as the one that doesn't, since it the above non-CSS then works properly and will disable (where appropriate) all the checkboxes regardless of CSS, but when the CSS are checked, all are disabled:
<div id="test" style="float:left; width:50%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td style="font-size:3px"> </td></tr>
<tr>
<p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr>
<td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" />
<label for="1" class="css-label">1</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" />
<label for="2" class="css-label">2</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" />
<label for="3" class="css-label">3</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" />
<label for="4" class="css-label">4</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
<label for="5" class="css-label">5</label></td></tr><tr>
<td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" />
<label for="6" class="css-label">6</label></td></tr> <input type="checkbox" name="check1" value="1" id="check1" >first
<input type="checkbox" name="check2" value="1" id="check2" >second
<input type="checkbox" name="check3" value="1" id="check3" >third
<input type="checkbox" name="check4" value="1" id="check4" >fourth
<input type="checkbox" name="check5" value="1" id="check5" >fifth
<input type="checkbox" name="check6" value="1" id="check6" >sixth
<input type="checkbox" name="check7" value="1" id="check7" >seventh
<input type="checkbox" name="check8" value="1" id="check8" >eight
</table>
</div>
.index() returns the index relative to the sibling elements. In your working example the siblings of an <input> are the other inputs. In your non-working example the only sibling is the <label> element.
In your "odd" example all inputs are siblings again.
In order to make it work anyway you can use .index(element):
$inputs.index($this)
This returns the index of the input $this within the jquery input collection $inputs. Working fiddle.
I would change the ID's on your input fields, ID's can't start with a number
<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" />
may cause problems with your JS. I would try something like
<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />
<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.