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);
});
Related
guy's i am trying to make my database showing into my checkbox (multi select).
but i dont know how.
i tried to make a code but it didn't work. here is my code.
i hope someone can help me with this and give me an example for the jquery code
$(document).ready(function() {
$.ajax({
type:"POST",
url:"../php/absen/absen_karyawan_autocomplete.php",
success: function(data){
var list = JSON.parse(data);
for(var i=0; i < list.length; i++){
$("#multiselect").append($("<label>").text((list[i]['nama'])).prepend(
$("<input>").attr('type', 'checkbox').val((list[i]['nama'])).prop('checked', true)
));
}
return false;
}
});
});
.multiselect {
width:20em;
height:10em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
<label><input type="checkbox" name="option[]" value="1" />I want put my database data here </label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
<label><input type="checkbox" name="option[]" value="1" />Green</label>
<label><input type="checkbox" name="option[]" value="2" />Red</label>
<label><input type="checkbox" name="option[]" value="3" />Blue</label>
<label><input type="checkbox" name="option[]" value="4" />Orange</label>
<label><input type="checkbox" name="option[]" value="5" />Purple</label>
<label><input type="checkbox" name="option[]" value="6" />Black</label>
<label><input type="checkbox" name="option[]" value="7" />White</label>
</div>
I have try to make an example for what i need
i just use one json data.
i hope someone can help me to change my code to server side .
i have made the code for server side like the 1st question but i am fail and the data not displaying at my page
var json = [
{
name: "I want to displaying my database data like this",
id: "27",
checked: "true"
}
];
$.each(json, function () {
$("#multiselect").append($("<label>").text(this.name).prepend(
$("<input>").attr('type', 'checkbox').val(this.id)
.prop('checked', this.checked)
));
});
$("#multiselect").on('change', '[type=checkbox]', function () {
console.log($(this).val());
});
.multiselect {
width:20em;
height:10em;
border:solid 1px #c0c0c0;
overflow:auto;
}
.multiselect label {
display:block;
}
.multiselect-on {
color:#ffffff;
background-color:#000099;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="multiselect"></div>
I searched more time with it but it's not work, I want to checkbox is disabled, user not check and can check it if some condition. Ok, now, I tried disabled them. I use jquery 2.1.3
<input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U01" />Banana
<input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U02" />Orange
<input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U03" />Apple
<input type="checkbox" class="checkbox1" id="chk" name="check[]" value="U04" />Candy
$(window).load(function () {
$('#chk').prop('disabled', true);
});
id should be unique. You cannot have four checkboxes with the same id.
You can try other selectors to select the whole range of checkboxes, like .checkbox1 (by class), input[type="checkbox"] (by tag/attribute). Once you've fixed the ids, you could even try #chk1, #chk2, #chk3, #chk4.
The snippet below uses the classname 'chk' instead of the id 'chk'. Also, it uses attr to set the attribute although it did work for me using prop as well.
$(window).load(function() {
$('.chk').attr('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="chk" name="check[]" value="U01" />Banana
<input type="checkbox" class="chk" name="check[]" value="U02" />Orange
<input type="checkbox" class="chk" name="check[]" value="U03" />Apple
<input type="checkbox" class="chk" name="check[]" value="U04" />Candy
You already changed the ID but you can also put the class in the same attribute such as:
<input type="checkbox" class="checkbox1 chk" name="check[]" value="U01" />Banana
Then you can use jQuery to either disable or check a checkbox depending on you needs like so
To disable:
$(function () {
$('.chk').prop('disabled', true);
});
To "precheck":
$(function () {
$('.chk').prop('checked', true);
});
You can change the selector to fit IDs or classes even elements and change the properties between true or false according to your needs.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U01" />Banana
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U02" />Orange
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U03" />Apple
<input type="checkbox" class="checkbox1" class="chk" name="check[]" value="U04" />Candy
Javascript/jQuery
$(function() {
$("input.checkbox1").prop("disabled", true);
});
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
<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.
I have more checkbox input that call function "boxclick" when the user click on this:
<input id="1box" type="checkbox" name="selected[]" onclick="boxclick(this,'1')">
<input id="2box" type="checkbox" name="selected[]" onclick="boxclick(this,'2')">
<input id="3box" type="checkbox" name="selected[]" onclick="boxclick(this,'3')">
<input id="4box" type="checkbox" name="selected[]" onclick="boxclick(this,'4')">
For check/uncheck all i use simple jquery script:
<input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" checked="checked">
My problem is when i check/uncheck all the function "boxclick" not run.
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
I think you can do:
HTML
<input id="1box" type="checkbox" name="selected[]">
<input id="2box" type="checkbox" name="selected[]">
<input id="3box" type="checkbox" name="selected[]">
<input id="4box" type="checkbox" name="selected[]">
jQuery
If you want to check/uncheck all checkbox:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', this.checked);
});
If you want to make select any one at a time:
var checkboxes = $('input[type=checkbox][name^=selected]');
checkboxes.on('click', function() {
checkboxes.prop('checked', false);
this.checked = !this.checked;
});
DEMO
Setting attribute of checkboxes to checked does not automatically fake a click event for you! Because you put those boxclick function calls within some "onclick" handlers, you must trigger a fake click event in order for your javascript to think that it clicked all the boxes. To trigger fake click event use $('#whatever').trigger('click'), for instance:
$('input[name*=\'selected\']').trigger('click');
If you want check/uncheck all functionality, you must say "ok, master checkbox, please listen for whenever I am checked or unchecked. When that happens, please set checked attribute of my slave boxes (your other boxes on the page) to match the master's current checked attribute." Like this:
function checkAllorUncheckAll(event){
var chiefCheckbx = event.currentTarget;
var myBoxes = $('input[name*=\'selected\']');
myBoxes.prop( "checked", $(chiefCheckbx).prop("checked") ).trigger('click');
}
$('#masterCheckBox').on('change',checkAllorUncheckAll);
I guess
$('input[name*=\'selected\']').attr('checked',
this.checked).trigger('click');
should do the trick here
Demo
http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>