We Keep Coding

trying to get all checkboxes from full page

I am trying to get all checked chckboxes value of a full page.
the full has all sort of html tags defined.
There is another piece to it which is div which has a parent class of "syllabus". except that class div and any checkboxes inside it will be ignored when the other checkboxes of complete page is checked
I am trying some like this:
$('input[type=checkbox]').each(function () {
var sThisVal = (this.checked ? $(this).val() : "");
});

Maybe something like this:
var checkedValues = [];
$('input[type=checkbox]:checked').each(function(){
checkedValues.push($(this).val());
});
console.log(checkedValues);
Or (using .map() and .get())
var checkedValues = $("input[type=checkbox]:checked").map(function() {
return $(this).val();
}).get();
console.log(checkedValues);
More info

Here you go with a solution
var sThisVal = [];
$('input[type=checkbox]').each(function () {
sThisVal.push((this.checked ? $(this).val() : ""));
});
console.log(sThisVal);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked value="1">Checkbox 1
<input type="checkbox" value="2">Checkbox 2
<input type="checkbox" checked value="3">Checkbox 3
<input type="checkbox"value="4">Checkbox 4
Hope this will help you.

Grab values from checked checkboxes and put them in an array using Javascript/jQuery

I want to get the values of checked checkboxes with the name="car_type[]" and alert the final array with all the values.
How to do that? So far, I have this code. But it's not working. I don't know how to loop through checked checkboxes properly and add the values to the array car_type_arr. I also cannot alert the final array using alert(car_type_arr);. Thanks for any help.
$().ready(function(){
$('.prettycheckbox').click(function(e) {
e.preventDefault();
var car_type_arr = [];
$("input:checkbox[name=car_type]:checked").each(function()
{
// here I need to add values to array like in php
// e.g. $car_type_arr[] = $the_grabbed_value;
// but using javascript syntax
// How to do that?
});
// then I need to alert the array, how to do that in JS?
alert(car_type_arr);
return false;
});
});

You can use map
var car_type_arr = $("input:checkbox[name=car_type]:checked").map(function() {
return this.value;
}).get();
console.log(car_type_arr);

Try below code:
<input type="checkbox" name="chkBox" value="xxx">
<input type="checkbox" name="chkBox" value="xxx1">
<input type="checkbox" name="chkBox" value="xxx2">
<input type="button" id="btnBox">
$(document).ready(function(){
$("#btnBox").click(function(){
var car_type_arr = [];
$("input:checkbox[name=chkBox]:checked").each(function() {
car_type_arr.push($(this).val());
alert(car_type_arr);
});
});
});
Demo: http://jsfiddle.net/XDpBP/

Try this:
$("input:checkbox[name=car_type]:checked").each(function()
{
car_type_arr.push($(this).val());
});

your code should look like,
$().ready(function(){
$('.prettycheckbox').click(function(e) {
e.preventDefault();
var car_type_arr = [];
$("input:checkbox[name=car_type]").each(function()
{
if($(this).is(':checked')){
car_type_arr.push($(this).val());
}
});
alert(car_type_arr);
return false;
});
});

$("input:checkbox[name=car_type]:checked").each(function() {
car_type_arr.push($(this).val());
});

How to get value of different checkboxes and calculate value of those checked checkboxes and show in the input field?

I have a little problem with getiing the value of diffrent checkboxes when it is checked. Here is my code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').bind('click',function()
{
var waterdm = $('#waterdm').val();
$("#price").val(waterdm);
});
});
</script>
<p><input type="checkbox" id="waterdm" name="waterdm" value="10" />Water Damage</p>
<p><input type="checkbox" id="screendm" name="screendm" value="20" />Screen Damage</p>
<p><input type="checkbox" id="Chargerdm" name="Chargerdm" value="30" />Charger Damage</p>
<p><input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone Damage</p>
<p>
Calculated Price: <input type="text" name="price" id="price" />
</p>
What I want is whenever user check in checkboxes I need to get those value and show the sum of each checkbox value which is checked in to another input box. It Means I need to sum those value of each checkbox
is checked.And when user unchecked any of the checkboxes then that value should subtracted from the that total. I don't have enough experience in jquery. Please help me.

You would need to iterate over the cheboxes. And change event makes more sense when you are talking in terms of checkboxes..
Use on to attach events instead of bind
$(document).ready(function () {
// cache the inputs and bind the events
var $inputs = $('input[type="checkbox"]')
$inputs.on('change', function () {
var sum = 0;
$inputs.each(function() {
// iterate and add it to sum only if checked
if(this.checked)
sum += parseInt(this.value);
});
$("#price").val(sum);
});
});
Check Fiddle

$(document).ready(function () {
var waterdm = 0;
$('input[type="checkbox"]').bind('click', function (e) {
if (this.checked) {
waterdm += eval(this.value);
} else {
waterdm -= eval(this.value);
}
$("#price").val(waterdm);
});
});
Demo here

Try this
$(document).ready(function(){
var waterdm=0;
$('input[type="checkbox"]').on('click',function()
{
waterdm = waterdm+parseInt($(this).val());
$("#price").val(waterdm);
});
});
Demo

You can use following code
$(document).ready(function(){
$('input[type="checkbox"]').click(function()
{
var val = 0;
$('input[type="checkbox"]:checked').each(function(){
val+=parseInt($(this).val());
});
$("#price").val(val);
});
});
Demo

If you want to sum all checked checkboxes try something like this:
$('input[type="checkbox"]').bind('click',function()
{
var sum = 0;
$('input[type="checkbox"]:checked').each(function(){
var val = parseInt($(this).val());
sum += val;
});
$("#price").val(sum);
});

Get the value of checked checkbox?

So I've got code that looks like this:
<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">
I just need Javascript to get the value of whatever checkbox is currently checked.
EDIT: To add, there will only be ONE checked box.

None of the above worked for me but simply use this:
document.querySelector('.messageCheckbox').checked;

For modern browsers:
var checkedValue = document.querySelector('.messageCheckbox:checked').value;
By using jQuery:
var checkedValue = $('.messageCheckbox:checked').val();
Pure javascript without jQuery:
var checkedValue = null;
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
}

I am using this in my code.Try this
var x=$("#checkbox").is(":checked");
If the checkbox is checked x will be true otherwise it will be false.

in plain javascript:
function test() {
var cboxes = document.getElementsByName('mailId[]');
var len = cboxes.length;
for (var i=0; i<len; i++) {
alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
}
}
function selectOnlyOne(current_clicked) {
var cboxes = document.getElementsByName('mailId[]');
var len = cboxes.length;
for (var i=0; i<len; i++) {
cboxes[i].checked = (cboxes[i] == current);
}
}

This does not directly answer the question, but may help future visitors.
If you want to have a variable always be the current state of the checkbox (rather than having to keep checking its state), you can modify the onchange event to set that variable.
This can be done in the HTML:
<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>
or with JavaScript:
cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})

$(document).ready(function() {
var ckbox = $("input[name='ips']");
var chkId = '';
$('input').on('click', function() {
if (ckbox.is(':checked')) {
$("input[name='ips']:checked").each ( function() {
chkId = $(this).val() + ",";
chkId = chkId.slice(0, -1);
});
alert ( $(this).val() ); // return all values of checkboxes checked
alert(chkId); // return value of checkbox checked
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">

Use this:
alert($(".messageCheckbox").is(":checked").val())
This assumes the checkboxes to check have the class "messageCheckbox", otherwise you would have to do a check if the input is the checkbox type, etc.

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">
function getValue(value){
alert(value);
}

None of the above worked for me without throwing errors in the console when the box wasn't checked so I did something along these lines instead (onclick and the checkbox function are only being used for demo purposes, in my use case it's part of a much bigger form submission function):
function checkbox() {
var checked = false;
if (document.querySelector('#opt1:checked')) {
checked = true;
}
document.getElementById('msg').innerText = checked;
}
<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

If you're using Semantic UI React, data is passed as the second parameter to the onChange event.
You can therefore access the checked property as follows:
<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />

Surprised to see no working vanilla JavaScript solutions here (the top voted answer does not work when you follow best practices and use different IDs for each HTML element). However, this did the job for me:
Array.prototype.slice.call(document.querySelectorAll("[name='mailId']:checked"),0).map(function(v,i,a) {
return v.value;
});

If you want to get the values of all checkboxes using jQuery, this might help you. This will parse the list and depending on the desired result, you can execute other code. BTW, for this purpose, one does not need to name the input with brackets []. I left them off.
$(document).on("change", ".messageCheckbox", function(evnt){
var data = $(".messageCheckbox");
data.each(function(){
console.log(this.defaultValue, this.checked);
// Do something...
});
}); /* END LISTENER messageCheckbox */

pure javascript and modern browsers
// for boolean
document.querySelector(`#isDebugMode`).checked
// checked means specific values
document.querySelector(`#size:checked`)?.value ?? defaultSize
Example
<form>
<input type="checkbox" id="isDebugMode"><br>
<input type="checkbox" value="3" id="size"><br>
<input type="submit">
</form>
<script>
document.querySelector(`form`).onsubmit = () => {
const isDebugMode = document.querySelector(`#isDebugMode`).checked
const defaultSize = "10"
const size = document.querySelector(`#size:checked`)?.value ?? defaultSize
// 👇 for defaultSize is undefined or null
// const size = document.querySelector(`#size:checked`)?.value
console.log({isDebugMode, size})
return false
}
</script>
Optional_chaining (?.)

You could use following ways via jQuery or JavaScript to check whether checkbox is clicked.
$('.messageCheckbox').is(":checked"); // jQuery
document.getElementById(".messageCheckbox").checked //JavaScript
To obtain the value checked in jQuery:
$(".messageCheckbox").is(":checked").val();

In my project, I usually use this snippets:
var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
type[i] = $(this).val();
});
And it works well.

Javascript checkbox onChange

I have a checkbox in a form and I'd like it to work according to following scenario:
if someone checks it, the value of a textfield (totalCost) should be set to 10.
then, if I go back and uncheck it, a function calculate() sets the value of totalCost according to other parameters in the form.
So basically, I need the part where, when I check the checkbox I do one thing and when I uncheck it, I do another.

Pure javascript:
const checkbox = document.getElementById('myCheckbox')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
alert('checked');
} else {
alert('not checked');
}
})
My Checkbox: <input id="myCheckbox" type="checkbox" />

function calc()
{
if (document.getElementById('xxx').checked)
{
document.getElementById('totalCost').value = 10;
} else {
calculate();
}
}
HTML
<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

If you are using jQuery.. then I can suggest the following:
NOTE: I made some assumption here
$('#my_checkbox').click(function(){
if($(this).is(':checked')){
$('input[name="totalCost"]').val(10);
} else {
calculate();
}
});

Use an onclick event, because every click on a checkbox actually changes it.

The following solution makes use of jquery. Let's assume you have a checkbox with id of checkboxId.
const checkbox = $("#checkboxId");
checkbox.change(function(event) {
var checkbox = event.target;
if (checkbox.checked) {
//Checkbox has been checked
} else {
//Checkbox has been unchecked
}
});

HTML:
<input type="checkbox" onchange="handleChange(event)">
JS:
function handleChange(e) {
const {checked} = e.target;
}

Reference the checkbox by it's id and not with the #
Assign the function to the onclick attribute rather than using the change attribute
var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
var checkbox = event.target;
if (checkbox.checked) {
//Checkbox has been checked
} else {
//Checkbox has been unchecked
}
};

Javascript
// on toggle method
// to check status of checkbox
function onToggle() {
// check if checkbox is checked
if (document.querySelector('#my-checkbox').checked) {
// if checked
console.log('checked');
} else {
// if unchecked
console.log('unchecked');
}
}
HTML
<input id="my-checkbox" type="checkbox" onclick="onToggle()">

try
totalCost.value = checkbox.checked ? 10 : calculate();
function change(checkbox) {
totalCost.value = checkbox.checked ? 10 : calculate();
}
function calculate() {
return other.value*2;
}
input { display: block}
Checkbox: <input type="checkbox" onclick="change(this)"/>
Total cost: <input id="totalCost" type="number" value=5 />
Other: <input id="other" type="number" value=7 />

I know this seems like noob answer but I'm putting it here so that it can help others in the future.
Suppose you are building a table with a foreach loop. And at the same time adding checkboxes at the end.
<!-- Begin Loop-->
<tr>
<td><?=$criteria?></td>
<td><?=$indicator?></td>
<td><?=$target?></td>
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>>
<!-- mark as 'checked' if checkbox was selected on a previous save -->
</div>
</td>
</tr>
<!-- End of Loop -->
You place a button below the table with a hidden input:
<form method="post" action="/goalobj-review" id="goalobj">
<!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->
<input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
<button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>
You can write your script like so:
<script type="text/javascript">
var checkboxes = document.getElementsByClassName('form-check-input');
var i;
var tid = setInterval(function () {
if (document.readyState !== "complete") {
return;
}
clearInterval(tid);
for(i=0;i<checkboxes.length;i++){
checkboxes[i].addEventListener('click',checkBoxValue);
}
},100);
function checkBoxValue(event) {
var selected = document.querySelector("input[id=selected]");
var result = 0;
if(this.checked) {
if(selected.value.length > 0) {
result = selected.value + "," + this.value;
document.querySelector("input[id=selected]").value = result;
} else {
result = this.value;
document.querySelector("input[id=selected]").value = result;
}
}
if(! this.checked) {
// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.
var compact = selected.value.split(","); // split string into array
var index = compact.indexOf(this.value); // return index of our selected checkbox
compact.splice(index,1); // removes 1 item at specified index
var newValue = compact.join(",") // returns a new string
document.querySelector("input[id=selected]").value = newValue;
}
}
</script>
The ids of your checkboxes will be submitted as a string "1,2" within the result variable. You can then break it up at the controller level however you want.