checkbox returning only 0 in formData - ajax

Question

<input type="hidden" value="0" name="visa">
<input type="checkbox" value="1" name="visa">
AJAX:
var formData = new FormData(document.getElementById("update-form"));
$.ajax({
type: "POST",
url: "teachers/" + $('#update-data').attr("value"),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data:formData,
processData: false,
contentType: false,
cache: false,
success: function (data) {
alert("updated");
}
});
even if my checkbox is checked or unchecked i am getting 0.
if i add following code, it shows 0 0 in console. it should return 1 if it is checked.
for (var pair of formData.entries()) {
console.log(pair);
}

Answer 1

You can use .is(':checked')
In your html
<input type="hidden" value="0" name="visa" id="hiddenInput">
<input type="checkbox" value="1" id="myCheckbox">
In your js
$("#myCheckbox").on('change',function(){
if($("#myCheckbox").is(':checked'))
$('#hiddenInput').val(1);
else{
$('#hiddenInput').val(0);
}
});
If you have multiple checkbox and lets say
like this below
<input type="checkbox" id="hiddenInput1">
<input type="checkbox" id="hiddenInput2">
You can loop checkbox and append to your data
add this line above ajax
var checkbox = $("#myForm").find("input[type=checkbox]");
$.each(checkbox, function(key, val) {
formData.append($(this).attr('id'), this.is(':checked'))
});

Answer 2

If you need checkbox value by default 0 if it's unchecked return 1 else 0 you can use the below code.
<input type="checkbox" name="visa" value="0" id="custom">
$('#custom').on('change', function(){
this.value = this.checked ? 1 : 0;
alert(this.value);
}).change();