I am running this code and it returns me set of values which are checked
var a = [];
var cboxes = $('input[name="suppcheck[]"]:checked');
var len = cboxes.length;
for (var i=0; i<len; i++) {
a[i] = cboxes[i].value;
//document.getElementByName('suppgrp[]').value = a[i];
}
I have a hidden field with ID suppgrp where I want to push all these values retrieved and wanted to pass it in array..
But I am not able to...where am I going wrong?
i have added some extra code which when page load then will call this function and also when change checkbox value then also call this function so all time it will work
loadCheck(); // initial call this function to load data
$('input[type="checkbox"]').change(function()
{
loadCheck();
});
function loadCheck() {
$('#hiddenValue').val('');
$('#showValue').val('');
var checkboxes = $('input[name="suppcheck[]"]:checked');
var data = [];
var len = checkboxes.length;
for (var i=0; i<len; i++) {
data[i] = checkboxes[i].value;
}
$('#hiddenValue').val(data);
$('#showValue').val(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" name="suppcheck[]" value="1" />
<input type="checkbox" name="suppcheck[]" value="2" />
<input type="checkbox" name="suppcheck[]" value="3" />
<input type="checkbox" name="suppcheck[]" value="4" />
<input type="checkbox" name="suppcheck[]" value="5" />
<input type="checkbox" name="suppcheck[]" value="6" />
<input type="checkbox" name="suppcheck[]" value="7" />
<input type="checkbox" name="suppcheck[]" value="8" />
<input type="checkbox" name="suppcheck[]" value="9" />
<input type="hidden" id="hiddenValue" />
<input type="text" id="showValue" />
</form>
var a = [];
jQuery('input[type="checkbox"]').change(function()
{
var cboxes = jQuery('input[name="suppcheck[]"]:checked');
var len = cboxes.length;
var alval = '';
for (var i=0; i<len; i++) {
a[i] = cboxes[i].value;
if (alval != '') {
alval += ','+a[i];
}else{
alval = a[i];
}
}
jQuery('#myhidden').val(alval);
});
Related
I have 3 input array fields whom I am calling by name using JS. When I call only one array input then its work as per loop, for example, if loop will run 3 times then it will show alert 3 times using below code
function checkFluency() {
var costPrice = document.getElementsByName('costPrice[]');
var salePrice = document.getElementsByName('salePrice[]');
var gst = document.getElementsByName('gst[]');
for (var i = 0; i <costPrice.length; i++) {
var costPrice_arr=costPrice[i];
var salePrice_arr=salePrice[i];
var gst_arr=gst[i];
//var sale = salePrice_arr.value;
var cost = costPrice_arr.value;
//var gst = gst_arr.value;
alert(cost);
}
}
As you can see, I have commented 2 lines which contains value of array input. When I uncomment any of this line. then loop only run once. If loop need to run 3 times, then it will run only one time if I uncomment any of these 2 lines.
Because of this, I couldn't right my code further in JS. Not getting what causing loop to stop. Any idea please, why loop only works if I use only one array input field?
update
It is showing in console Type Error: salePrice_arr is undefined. But it is defined same as "costPrice_arr"!
Change your var gst = gst_arr.value; to var gst_new = gst_arr.value;. Also, you mispelled salePrice_arr.value;. Change it to salePrice_ar.value;
Here:
function checkFluency() {
var costPrice = document.getElementsByName('costPrice[]');
var salePrice = document.getElementsByName('salePrice[]');
var gst = document.getElementsByName('gst[]');
for (var i = 0; i < costPrice.length; i++) {
var costPrice_arr = costPrice[i];
var salePrice_ar = salePrice[i];
var gst_arr = gst[i];
var sale = salePrice_ar.value;
var cost = costPrice_arr.value;
var gst_new = gst_arr.value;
alert(cost);
}
}
<input name="costPrice[]" value="1" />
<input name="salePrice[]" value="2" />
<input name="gst[]" value="3" />
<input name="costPrice[]" value="2" />
<input name="salePrice[]" value="4" />
<input name="gst[]" value="6" />
<input name="costPrice[]" value="3" />
<input name="salePrice[]" value="6" />
<input name="gst[]" value="9" />
<button onclick="checkFluency()">Check</button>
The case for your image is something like this:
function checkFluency() {
var costPrice = document.getElementsByName('costPrice[]');
var salePrice = document.getElementsByName('salePrice[]');
var gst = document.getElementsByName('gst[]');
for (var i = 0; i < costPrice.length; i++) {
var salePrice_arr = 0;
var gst_arr = 0;
salePrice_arr = salePrice[i];
var costPrice_arr = costPrice[i];
gst_arr = gst[i];
var sale_new = salePrice_arr.value;
var cost = costPrice_arr.value;
var gst_new = gst_arr.value;
alert(cost);
}
}
<input name="costPrice[]" value="1" />
<input name="salePrice[]" value="2" />
<input name="gst[]" value="3" />
<input name="costPrice[]" value="2" />
<input name="salePrice[]" value="4" />
<input name="gst[]" value="6" />
<input name="costPrice[]" value="3" />
<input name="salePrice[]" value="6" />
<input name="gst[]" value="9" />
<!-- Extra -->
<input name="costPrice[]" value="3" />
<button onclick="checkFluency()">Check</button>
I need to get a list of the checkbox values when checked and passed them to an input. However, my value is duplicated when I click checkall first. Please help me. Thanks.
My Code
<input id="listvalue" name="selectedCB">
<input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" />
<div class="tycheck">
<input type="checkbox" name="checkAll" value="2" class="checkSingle" />
<input type="checkbox" name="checkAll" value="1" class="checkSingle" />
<input type="checkbox" name="checkAll" value="3" class="checkSingle" />
</div>
$(document).ready(displayCheckbox);
var idsArr = [];
var displayField = $('input[name=selectedCB]');
function toggle(source) {
var checkboxes = document.querySelectorAll('.tycheck input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
idsArr = [];
$('#checkall').find('input[type=checkbox]:checked').each(function () {
idsArr.push(this.value);
});
displayField.val(idsArr);
}
}
function displayCheckbox() {
var checkboxes = $(".tycheck input[type=checkbox]");
function printChecked() {
var checkedIds = [];
idsArr = [];
// for each checked checkbox, add it's id to the array of checked ids
checkboxes.each(function () {
if ($(this).is(':checked')) {
idsArr.push($(this).attr('value'));
console.log(idsArr);
}
else {
var checkboxesallcheck = document.querySelectorAll('input[name="checkedAll"]');
for (var j = 0; j < checkboxesallcheck.length; j++) {
checkboxesallcheck[j].checked = false;
}
}
displayField.val(idsArr);
});
}
$.each(checkboxes, function () {
$(this).change(printChecked);
})
}
How to get a list of the checkbox values when checked and passed them to an input. :(
You can try this:
var idsArr = [];
var displayField = $('input[name=selectedCB]');
var checkboxes = Array.from($(".tycheck input[type=checkbox]"));
function toggle(source) {
var values = checkboxes.map(x => {
x.checked = source.checked;
return source.checked ? x.value : '';
}).join(source.checked ? ',' : '');
displayField.val(values);
}
function printChecked() {
var values = checkboxes.filter(x => x.checked).map(x => x.value);
displayField.val(values);
}
$.each(checkboxes, function () {
$(this).change(printChecked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="listvalue" name="selectedCB">
<input type="checkbox" onclick="toggle(this)" name="checkedAll" id="checkedAll" />
<div class="tycheck">
<input type="checkbox" name="checkAll" value="2" class="checkSingle" />
<input type="checkbox" name="checkAll" value="1" class="checkSingle" />
<input type="checkbox" name="checkAll" value="3" class="checkSingle" />
</div>
You could do like this
Use any one of the type javascript selector or JQuery selector
Not necessary to use Array or forloops .All function already there in jquery concept .For that we used Jquery.map
For below i have simply create one change function call.checker
Then call that function on checkbox change event in both checkall and normal check event
$(document).ready(function() {
const elem = $('.tycheck input[type=checkbox]'); //select the checkbox elem
elem.on('change', function() {
checker(elem) //get the checked value list
})
$('#checkedAll').on('change', function() {
elem.prop('checked', $(this).is(':checked')) //for select all simply compare with checkall button
checker(elem)
})
})
function checker(elem) {
let res = elem.map((i, item) => {
if ($(item).is(':checked')) {
return $(item).val()
}
}).get()
$('#listvalue').val(res.toString())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="listvalue" name="selectedCB">
<input type="checkbox" name="checkedAll" id="checkedAll" />
<div class="tycheck">
<input type="checkbox" name="checkAll" value="2" class="checkSingle" />
<input type="checkbox" name="checkAll" value="1" class="checkSingle" />
<input type="checkbox" name="checkAll" value="3" class="checkSingle" />
</div>
I want to make a custom cricket team and select multiple players from different teams and then displaying them
function getMultipleCheckbox(inputdata) {
var selectedItems = [];
var count = 0;
for (var i = 0; i < inputdata.length; i++) {
if (inputdata[i].checked) {
selectedItems[count] = inputdata[i].value;
count++;
}
}
for (var loop = 0; loop < selectedItems.length; loop++) {
console.log(selectedItems[loop]);
}
return selectedItems;
}
<p>Select players</p>
<form>
<input type="checkbox" name="owns" value="player1">player1<br/>
<input type="checkbox" name="owns" value="player2">player2<br/>
<input type="checkbox" name="owns" value="player3">player3<br/>
<input type="checkbox" name="owns" value="player4">player4<br/>
<input type="checkbox" name="owns" value="player5">player5<br/>
<input type="checkbox" name="owns" value="player6">player6<br/>
<input type="button" value="Get Values" onclick="getMultipleCheckbox(this.form.owns);" />
</form>
How can I get all value from chekboxes that provided ?
THis is the code :
$(document).on('pjax:complete', function(data){
var checkbox = $("input[type='checkbox'][name='selection[]']");
for (var i = 0; i < checkbox.length; i++) {
console.log(checkbox[i]); // get html string
console.log(checkbox[i].val()); // checkbox[i].val is not a function
}
});
Please advise.
You want all chekbox values? Try this:
$("input[type='checkbox']").serialize()
Use checkbox[i].value to be able to get the values of the checkboxes
$(document).ready(function(data) {
var checkbox = $("input[type='checkbox'][name='selection[]']");
for (var i = 0; i < checkbox.length; i++) {
console.log(checkbox[i].value); // checkbox[i].val is not a function
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selection[]" value="1" />
<input type="checkbox" name="selection[]" value="2" />
<input type="checkbox" name="selection[]" value="3" />
<input type="checkbox" name="selection[]" value="4" />
I can able to load value from databases to text-box...so now named as auto..from this i want to create a auto search with multiple check box to select multiple value in text-box java script...its possible ...??
<form name="form1">
<input type="checkbox" name="checkboxname" value="a">
<input type="checkbox" name="checkboxname" value="b">
<input type="checkbox" name="checkboxname" value="c">
</form>
<form name="form2">
<input type="text" name="textname">
</form>
var textbox = document.getElementsByName("textname")[0];
var checkboxes = document.getElementsByName("checkboxname");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = (function(chk){
return function() {
var value = "";
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
if (value === "") {
value += checkboxes[j].value;
} else {
value += "," + checkboxes[j].value;
}
}
}
textbox.value = value;
}
})(checkbox);
}
Try this,
<form name="form1" class="form_chk">
<input type="checkbox" name="checkboxname" value="a" class="chk_box">a
<input type="checkbox" name="checkboxname" value="b" class="chk_box">b
<input type="checkbox" name="checkboxname" value="c" class="chk_box">c
</form>
$( "#txt_search" ).blur(function(e) {
var $search = $(e.currentTarget),
search_str = $search.val().toLowerCase(), $chk,
$chk_ele = $('.chk_box').filter(function(index, chk){
if($(chk).val().toLowerCase().search(search_str) !== -1){
return $(chk);
}
});
$('.chk_box').prop('checked', false);
$chk_ele.prop('checked', true);
});
See the output : http://jsfiddle.net/J7dUz/