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>

P Element copy to Input value and just one select

First name repeats and other names can not be selected, where is the problem?
Also, how do I make the choice just one name?
function copyTextValue(bf) {
if(bf.checked)
var text1 = document.getElementById("names").innerHTML;
else
text1='';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
<b>Names</b><hr/>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>James</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Emre</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Kate</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Berkay</p>
<hr/><b>Form</b><hr/>
<input id="Name2">
<input id="Name3">
https://jsfiddle.net/emresaracoglu/LL5ukynq/

You have used id attribute with same ids so it will not work. so you need to set id with different value and pass it in function.
function copyTextValue(bf,selector) {
if(bf.checked)
var text1 = document.getElementById(selector).innerHTML;
else
text1='';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
<b>Names</b><hr/>
<input type="radio" name="check1" onchange="copyTextValue(this,'names1');"/><p id='names1'>James</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names2');"/><p id='names2'>Emre</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names3');"/><p id='names3'>Kate</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names4');"/><p id='names4'>Berkay</p>
<hr/><b>Form</b><hr/>
<input id="Name2">
<input id="Name3">

check all function with outputting labels into a div

i have a group of check boxes and i want to use a check all function but only for the corresponding checkboxes for example if i click checkAll1 it will only highlight checkItem 1 but also will still allow me to check other check boxes.
you will see from the snippet below the code i currently have, i want to also be able to put the checkAll label when it comes out to the #check div to be in a p tag so i can style it.
hope this all makes sense
Many thanks
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use value to call checkbox, Do something like this..
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
var chk5 = $("input[type='checkbox'][value='5']");
var chk6 = $("input[type='checkbox'][value='6']");
chk1.on('change', function(){
chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
chk4.prop('checked',this.checked);
});
chk5.on('change', function(){
chk6.prop('checked',this.checked);
});
$("input[type='checkbox']").change(function(){
$("#checked").empty();
$("input[type='checkbox']:checked").each(function(){
$("#checked").html($("#checked").html() + $(this).next().text() + "<p></p>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1" value="1"><label for="checkAll1" >Check All</label>
<input type="checkbox" id="checkItem1" value="2"> <label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item 2</label>
<input type="checkbox" id="checkItem1" value="2"><label for="checkItem1" >Item3</label>
<hr />
<input type="checkbox" id="checkAll2" value="3"> <label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2" value="4"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3" value="5"><label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3" value="6"> <label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3" value="6"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>

I tweak your code a little, and what you mean by able to put the checkAll label when it comes out to the #check div which i did't get it, try this below code :
$("input[type='checkbox']").change(function() {
$("#checked").empty();
$("input[type='checkbox']:checked").each(function() {
$("#checked").html($("#checked").html() + $(this).next().text() + " ");
});
});
$(".checkAll").click(function() {
if ( $(this).is(':checked') )
$(this).siblings(':checkbox').prop('checked', true);
else
$(this).siblings(':checkbox').prop('checked', false);
});
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll1" class="checkAll">
<label for="checkAll1">Check All</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item 2</label>
<input type="checkbox" id="checkItem1">
<label for="checkItem1">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll2" class="checkAll">
<label for="checkAll2">Check All</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 1</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem2">
<label for="checkItem2">Item3</label>
</div>
<hr />
<div>
<!-- add class="checkAll" for checkAll checkbox only -->
<input type="checkbox" id="checkAll3" class="checkAll">
<label for="checkAll3">Check All</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 1</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item 2</label>
<input type="checkbox" id="checkItem3">
<label for="checkItem3">Item3</label>
</div>
<p>You have selected:</p>
<div id="checked"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
p/s : like other said, id must be unique for elements

Assign a same class for the same row check boxes
Use the below jquery
$("#checkAll1").change(function(){
$(".checkItem1").prop("checked", true);
});
$("#checkAll2").change(function(){
$(".checkItem2").prop("checked", true);
});
$("#checkAll3").change(function(){
$(".checkItem3").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll1"><label for="checkAll1">Check All</label>
<input type="checkbox" class="checkItem1"> <label for="checkItem1">Item 1</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item 2</label>
<input type="checkbox" class="checkItem1"><label for="checkItem1">Item3</label>
<hr />
<input type="checkbox" id="checkAll2"> <label for="checkAll2">Check All</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 1</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item 2</label>
<input type="checkbox" class="checkItem2"><label for="checkItem2">Item3</label>
<hr />
<input type="checkbox" id="checkAll3"><label for="checkAll3">Check All</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item 1</label>
<input type="checkbox" class="checkItem3"> <label for="checkItem3">Item 2</label>
<input type="checkbox" class="checkItem3"><label for="checkItem3">Item3</label>
<p>You have selected:</p><div id="checked"></div>
let me know if it is helpful

Javascript: Select all checkboxes by classname

I'm having an issue with the following code which selects all checkboxes in the row based on the 'Select All' button clicked. The problem is I have to click each button twice if some checkboxes are already checked in order to change their state. I'd like to do this with just one click on each button no matter if checkboxes are selected or not. Is there a simple way to do this? Thank you!
jsFiddle
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>
checked = true;
function CheckUncheckAllAndExcludeDisabledByClass(theElement,theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = checked;
}
}
checked = !checked;
}

You can use this demo to check uncheck of checkbox on single click, click on below link and check demo and integrate in your system.
HTML CODE:
<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<div id="divCheckboxList">
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
<div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>
Jquery Code
function check_uncheck_checkbox(isChecked) {
if(isChecked) {
$('input[name="language"]').each(function() {
this.checked = true;
});
} else {
$('input[name="language"]').each(function() {
this.checked = false;
});
}
}
http://phppot.com/jquery/check-uncheck-all-checkbox-using-jquery/
Thanks

You need to store separate state for each checkbox type
checked = {};
function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
var ckd = checked[theCheckBoxClass] === false ? false : true;
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = ckd;
}
}
checked[theCheckBoxClass] = !ckd;
}
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>
But if you have jQuery then
$('.select-all').click(function() {
var $this = $(this),
checked = !$this.data('checked');
$('.' + $this.data('class')).not(':disabled').prop('checked', checked);
$this.data('checked', checked)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="edit">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button select-all" value="Select All" title="Select all: items." data-class="view">
</form>

You can do it like this :
HTML :
<div id="test">
<input type="checkbox" id="check1" name="check1" class="check">
<input type="checkbox" id="check01" name="check01" class="check" disabled="disabled" checked>
<input type="checkbox" id="check2" name="check2" class="check" disabled="disabled">
<input type="checkbox" id="check3" name="check3" class="check">
<input type="checkbox" id="check4" name="check4" class="check">
<input type="checkbox" id="check50" name="check50" class="check">
<input type="checkbox" id="check6" name="check6" class="check">
</div>
<input type="button" id="uncheckAll" value="select all">
JS :
$('#uncheckAll').click(function(){
var checks = $('input[class="check"]');
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
if (check.checked) {
check.checked = false;
}
}
}
for(var i =0; i< checks.length;i++){
var check = checks[i];
if(!check.disabled){
if (!check.checked) {
check.checked = true;
}
}
}
});
Here is the working Fiddle
Do let me know if it is according to your requirement.
Happy Coding.

Try adjusting checked variable to utilize Array.prototype.filter to select elements not disabled , Array.prototype.every to toggle element checked attribute
function CheckUncheckAllAndExcludeDisabledByClass(theElement, theCheckBoxClass) {
var checks = document.querySelectorAll('.' + theCheckBoxClass);
var checked = Array.prototype.filter.call(checks, function(el) {
return !el.disabled
}).every(function(el) {
return el.checked
});
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = !checked ? true : false;
}
}
}
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="CheckUncheckAllAndExcludeDisabledByClass(this,'view')" title="Select all: items.">
</form>

Problem is you are using same flag for multiple class names:
Plain Js solution:
var state = {};
var toggle = function(clas) {
var chk = state[clas] = !state[clas];//flips the state (true/false)
var chks = document.getElementsByClassName(clas);
var l = chks.length;
while (l--)
if (!chks[l].disabled)
chks[l].checked = chk;
};
<form name="editview">
<input type="checkbox" id="edit_1" name="check1" class="edit">
<input type="checkbox" id="edit_2" name="check2" class="edit" disabled="disabled" checked="checked">
<input type="checkbox" id="edit_3" name="check3" class="edit" disabled="disabled">
<input type="checkbox" id="edit_4" name="check4" class="edit">
<input type="button" class="button" value="Select All" onclick="toggle('edit')" title="Select all: items.">
<input type="checkbox" id="view_5" name="check5" class="view">
<input type="checkbox" id="view_6" name="check6" class="view" disabled="disabled" checked="checked">
<input type="checkbox" id="view_7" name="check7" class="view" disabled="disabled">
<input type="checkbox" id="view_8" name="check8" class="view">
<input type="button" class="button" value="Select All" onclick="toggle('view')" title="Select all: items.">
</form>

How to add value of checked checkbox to textarea using jQuery?

How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4

Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle

You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.