We Keep Coding

Get all cheched ckexbox and set it to hiden input

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>

Select the value of an element by name

How to access the value of this input field that is checked by its name attribute using Javascript :
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
I write this :
document.querySelector('input[name="rate"]:checked').value;
but there is an error:
TypeError: document.querySelector(...) is null
And I do not want to be checked any inputs by default

Not sure if this will help you, but this snippet lets you select the value of the radio element that is checked, if it exists.
radioElems = document.querySelectorAll("input[name='rate']");
radioElems.forEach((elem) => {
if (elem.checked) {
console.log(`Check found with value ${elem.value}`);
} else {
console.log("Not checked");
}
});

You're missing quotes:
document.querySelector('input[name="rate"]:checked').value;

you should call function for each radio button change event
function handleRadioButtonChange() {
console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" class="radioButton" name="rate" value="1" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="2" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="3" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="4" onchange="handleRadioButtonChange()">

You can check if any element matches your querySelector before accessing the value like this:
document.querySelector('input[name="rate"]:checked') && document.querySelector('input[name="rate"]:checked').value

Run a function every time the input change status changes using onchange this function, in turn, logs the value of the clicked input
var rate = document.querySelectorAll(('input[name="rate"]'))
rate.forEach( each => (each.onchange = () => (console.log(each.value))))
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">

What you're doing is absolutely correct! You just need to call this in onchange of the input. Since, you're calling this when no inputs are checked, you're getting this error.
function handleChange1(){
console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" onchange="handleChange1();" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">

How to select input elements with custom data atributes?

I need to get all selected checkboxes with a custom data attribute.
<input type="checkbox" class="check" data-name="id" value="5">
$("input[data-name='id']:selected") and $("input:selected[data-name='id']")
don't work.

Checkboxes and radio get checked not selected. Below will create an array of all the checked checkboxes.
var arry = [];
$("input[data-name='id']:checked").each(function(){
arry.push(this.value);
});
console.log(arry);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input checked type="checkbox" class="check" data-name="id" value="5">
<input checked type="checkbox" class="check" data-name="id" value="3">

The below should select based on the data-name attribute combined with :checked selector
console.log($('[data-name=id]:checked'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check" data-name="id" value="5">
<input type="checkbox" class="check" data-name="id" value="6" checked>
<input type="checkbox" class="check" data-name="id" value="7">
<input type="checkbox" class="check" data-name="id" value="8" checked>
<input type="checkbox" class="check" data-name="id" value="9" checked>

Checking which checkbox was checked

I am implementing Multiple select with checkboxes and jQuery as described at http://www.1stwebdesigns.com/blog/development/multiple-select-with-checkboxes-and-jquery
This is the example shown in the website:
<div class="multiselect">
<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>
The dropdown list with checkboxes is showing as expected. Please note that there are three such lists being displayed on one page. How to identify them individually?
The question is how do I determine using javascript which of the checkboxes under each of the lists have been selected. I also need to obtain the value of the selected item. Which of these have to tagged with an id?

$('input[type="checkbox"]').on('change',function(){
$(this).closest('.multiselect').find('span').empty();
$(this).closest('.multiselect').find('input[type="checkbox"]:checked').each(function(){
$(this).closest('.multiselect').find('span').append($(this).val()+' | ');
});
});
<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" />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>
<br>
Checked values: <span></span>
</div>
<div class="multiselect">
<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>
<br>
Checked values: <span></span>
</div>

you can try this below, it will display the value of each checkbox who is checked
function check(){
var e = document.getElementsByClassName('check-box');
var total = e.length;
for (var i=0; i<total; i++){
if (total[i].checked){ alert(total[i].value); }
// or alert(i); if you just need the index
}
}

Here is an example which may help you:
$(':checkbox').change(function(){
var liste2 = $(':checkbox:checked').map(function() {
return this.value;
}).get();
$('span').text(liste2);
});
<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" />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>
<br>
Checked values: <span></span>
</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.