Get all cheched ckexbox and set it to hiden input - javascript

I have 5 html checkboxes, but every time they have different value, I want when everytime when i check or uncheck checkbox to call this js function to get all checked chexbox and add it to hiden input
This is my html
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="1" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="2" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="3" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="4" onchange="getValue(this.value)">
<input type="checkbox" id="checkbox" class="checkbox" name="checkbox" value="5" onchange="getValue(this.value)">
<input type="hidden" id="ticketsPay" name="ticketsPay" value="">
And this is my js
let myArray = (function() {
let a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
document.getElementById('ticketsPay').value = myArray.toString();
JS dont save in hidden input all checked checkbox any idea?

Here's an example that uses Array.prototype.reduce and accounts only the checked ones:
const EL_inp = document.querySelector("#ticketsPay");
const ELs_ckb = document.querySelectorAll('[name="checkbox"]');
const setChecked = () => {
EL_inp.value = [...ELs_ckb].reduce((a, EL) => {
if (EL.checked) a.push(EL.value);
return a;
}, []);
};
ELs_ckb.forEach(EL => EL.addEventListener("input", setChecked));
<input type="checkbox" class="checkbox" name="checkbox" value="1">
<input type="checkbox" class="checkbox" name="checkbox" value="2">
<input type="checkbox" class="checkbox" name="checkbox" value="3">
<input type="checkbox" class="checkbox" name="checkbox" value="4">
<input type="checkbox" class="checkbox" name="checkbox" value="5">
<input id="ticketsPay" name="ticketsPay" value="" readonly>

Related

Checkbox event not triggering class toggle on label

Similar questions on stack overflow but not quite what I need.
So I have a parent div with multiple checkboxes wrapped in labels, I then attached a click event on the parent so it bubbles to every child element. My problem is the class is toggled fine when clicked on the label (it's a class that changes the style of the label), but when I click on the actual little checkbox it does not work since it adds the class to the input and not the label, how would I make it that the class is toggled on the label even if the event. target is on the checkbox input
const requiredForm = document.querySelectorAll('.drinos-required')
const requiredCheckbox = document.querySelector('.required-form-input')
const requiredFunction = function(evt) {
if (!evt.target.classList.contains('drinos-required')) return;
evt.target.classList.toggle('checkerActive')
}
requiredCheckbox.addEventListener('click', requiredFunction)
.checkerActive {
background-color: red;
}
<div class="required-form-input">
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Electrician</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Plumber</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Mason</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Carpenter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Handyman</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Painter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Cleaner</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Tree Service</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>
You need to map input/label events and not the .required-form-input. Verify all targets clicked with drinos-checkbox-required and valid if is label or checkbox. If checkbox, closest label and set the class.
const requiredForm = document.querySelectorAll('.drinos-required')
const requiredCheckbox = document.querySelector('.required-form-input')
const requiredFunction = function(evt) {
if (evt.target.classList.contains('drinos-checkbox-required')) {
if (evt.target.tagName == 'label')
evt.target.classList.toggle('checkerActive');
else evt.target.closest("label").classList.toggle('checkerActive');
}
}
requiredForm.forEach((el) => el.addEventListener('click', requiredFunction))
.checkerActive {
background-color: red;
}
<div class="required-form-input">
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Electrician</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Plumber</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Mason</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Carpenter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Handyman</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Painter</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Cleaner</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Lawn Care/Landscaping</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Tree Service</label>
<label class="drinos-required"> <input class="drinos-checkbox-required" type="checkbox" name="checkbox" value="value">Pool Service</label>
</div>
Although I think this might not be the best solution or best practice, it worked. What I did was attach another listener to the label
const requiredForm = document.querySelectorAll('.drinos-required').forEach(curr => {
curr.addEventListener('click', function () {
curr.classList.toggle('checkerActive')
})
})

How can I create an array from names and values of checkboxes in Javascript?

Imagine I have an array of selected checkboxes. Each has a value and name that corresponds with a filter.
<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">
How can I sort these into one array, like below?
const filters = [
'colors': [ 'blue', 'orange'],
'items': ['chair', 'bed'],
'material': ['plastic', 'wood'],
]
You could get the elements and build an object of arrays.
const result = {};
for (const { name, value } of document.getElementsByClassName('filter-item--checkbox')) {
(result[name] ??= []).push(value);
}
console.log(result);
<input class="filter-item--checkbox" type="checkbox" name="colors" value="blue">
<input class="filter-item--checkbox" type="checkbox" name="colors" value="orange">
<input class="filter-item--checkbox" type="checkbox" name="items" value="chair">
<input class="filter-item--checkbox" type="checkbox" name="items" value="bed">
<input class="filter-item--checkbox" type="checkbox" name="material" value="plastic">
<input class="filter-item--checkbox" type="checkbox" name="material" value="wood">
For the OP's use case, where it was said that a solution should target just checked checkbox controls one could/should utilize the FormData Web-API and its entries method together with a reduce task. Passing a form reference directly into the FormData constructor ensures only active control data to be part of the form data object. Thus the name/key and value of an unchecked checkbox control gets not reflected by the form data object.
const formData = new FormData(document.forms[0]);
console.log(
Array
.from(
formData.entries()
)
.reduce((result, [key, value]) => {
const groupedValueList = (result[key] ??= []);
groupedValueList.push(value);
return result;
}, {})
);
.as-console-wrapper { min-height: 85%!important; }
<form>
<input type="checkbox" name="colors" value="blue" checked/>
<input type="checkbox" name="colors" value="orange" checked/>
<input type="checkbox" name="items" value="chair" checked/>
<input type="checkbox" name="items" value="bed" checked/>
<input type="checkbox" name="material" value="plastic" checked/>
<input type="checkbox" name="material" value="wood" checked/>
</form>
In case of collecting all grouped checkbox values regardless of their checked state one just needs to change the above approach slightly too ...
console.log(
Array
.from(
document.querySelectorAll('form [type="checkbox"]')
)
.reduce((result, { name:key, value }) => {
const groupedValueList = (result[key] ??= []);
groupedValueList.push(value);
return result;
}, {})
);
.as-console-wrapper { min-height: 85%!important; }
<form>
<input type="checkbox" name="colors" value="blue" checked/>
<input type="checkbox" name="colors" value="orange"/>
<input type="checkbox" name="items" value="chair" checked/>
<input type="checkbox" name="items" value="bed"/>
<input type="checkbox" name="material" value="plastic" checked/>
<input type="checkbox" name="material" value="wood"/>
</form>

jQuery - Calculate the value by multiplying it by the checkbox values

I need to calculate the value total, which is a product of initial value (let's say 10) and the factors A, B, C and D, which are equal to, let's say 2, 3, 4 and 5.
The combination of factors should be selected by user via checking the corresponding boxes. The problem is that I need to repeat this many times independently in a form and the solution below (for two of these sections) does not separate this process correctly. If these were text values, I would do e.g. var $text = $(".result", $section);
Basically, I do not understand how to relate numerical variable to these sections. Also, it would be great to have this initial value (10) in the Result field even if none of the boxes are checked.
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section");
var total = 10;
$(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$('.result').val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
</div>
I assume that you want the rows to be independent:
$(document).ready(function() {
$(".factor-checkbox").click(function(event) {
var $section = $(this).closest(".section"),
initial = parseInt($section.find('.result').data('initial')),
total = initial;
$section.find("input:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find('.result').val(total === initial ? initial : total);
});
// getting the total values
$(".res_button").click(function() {
var $section = $(this).closest(".section");
var total = $section.find('.result').val();
console.log(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="10" value="10" class="result"></label>
<label><button class="res_button">Result 1 line</button></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" data-initial="20" value="20" class="result"></label>
<label><button class="res_button">Result 2 line</button></label>
</div>
$(document).ready(function() {
$(".factor-checkbox").click(function() {
var $section= $(this).closest(".section")
var total = 10;
$section.find(".factor-checkbox:checked").each(function() {
total *= parseInt($(this).val());
});
$section.find(".result").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label>
<label>Result <input type="text" value="10" class="result"></label>
</div>

set array values into checkbox in jquery

I want to set array vlaues as checked in checkbox using jquery
I have three values in one array and want to set as checked value of checkbox.
Here you go with the solution https://jsfiddle.net/41etxeyy/1/
var arr = [2,5,6];
for(var i=0; i<arr.length; i++){
$('input[type="checkbox"][value="' + arr[i] +'"]').prop('checked', 'checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox" value="1" />1 <br/>
<input type="checkbox" name="checkbox" value="2" />2 <br/>
<input type="checkbox" name="checkbox" value="3" />3 <br/>
<input type="checkbox" name="checkbox" value="4" />4 <br/>
<input type="checkbox" name="checkbox" value="5" />5 <br/>
<input type="checkbox" name="checkbox" value="6" />6 <br/>
<input type="checkbox" name="checkbox" value="7" />7 <br/>
I guess this is what you are looking for.

Toggle multiple Checkbox at once

I have these checkboxs:
'<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">';
'<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">';
'<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">';
Which I can check or uncheck by clinking on them. Now I am trying to add one more checkbox, which will check or uncheck all previous checkbox at once when clicking.
'<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">'
What is the JS code to execute when clicking the checkbox to check or uncheck all checkbox "toggleable" at once?
Here's an example on how to make this work in pure JavaScript.
var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
var checked = this.checked;
var otherCheckboxes = document.querySelectorAll(".toggleable");
[].forEach.call(otherCheckboxes, function(item) {
item.checked = checked;
});
});
<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
<br/>
<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">
<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">
<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">
try it
$(document).ready(function() {
$(".toggleable").click(function() {
var checkboxes = $(".toggleable");
if($(this).prop("checked")) checkboxes.prop("checked",true);
else checkboxes.prop("checked",false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkBox1" class= "toggleable">
<input type="checkbox" name="checkBox2" class= "toggleable">
<input type="checkbox" name="checkBox3" class= "toggleable">
Just verify through JS that if particular checkbox checked. It has to check all of them.
JS Demo Below: UPDATE
Just added id to your inputs.
function checkAll(x) {
if(x.checked == true){
document.getElementById('c1').checked = true;
document.getElementById('c2').checked = true;
document.getElementById('c3').checked = true;
}else{
document.getElementById('c1').checked = false;
document.getElementById('c2').checked = false;
document.getElementById('c3').checked = false;
}
}
Multiple Check Box Below:
<br>
<input type="checkbox" name="checkBox1" value="checked" class="toggleable" id="c1">
<input type="checkbox" name="checkBox2" value="checked" class="toggleable" id="c2">
<input type="checkbox" name="checkBox3" value="checked" class="toggleable" id="c3">
</br>
Check below to Check them all:
</br>
<input type="checkbox" name="check_uncheck_all" onchange='checkAll(this);' value="false" id="id_check_uncheck_all">
JQuery Demo below:
$('#checkAll').click(function () {
$('input:checkbox').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" > Check All
</br>
<input type="checkbox" id="checkItem"> Item 1
<input type="checkbox" id="checkItem"> Item 2
<input type="checkbox" id="checkItem"> Item3

Categories