How to check with javascript if checkbox is checked

Check if a checkbox is checked using JavaScript in ChronoForms.

Overview

The standard JavaScript method to check a checkbox state may not work due to how CF handles form elements.
Use jQuery's .prop('checked') method within a click event or validation function to reliably detect the checkbox state.

Answered
ChronoForms v5
Kr Kronosites 01 Apr, 2018
Hello,
​
I'm using javacript to detect if checkbox is checked or not, but nothing is working.
​
If I use getElementById("").checked, doesn't work.
If I use getElementById("").checked == true, doesn't work.
If I user getElementById("").value = 1, doesn't work (because, checked or not, the value is always = 1)
​
What I'm doing wrong?
​
This is the code:
function confSubmit(form) {

if (document.getElementById("id").checked) {

form.submit();

}

else {

$("#notchecked").toggle('show');

}

}
​
Thanks!
Gr GreyHead 01 Apr, 2018
Hi Kronosites ,
​
I'm not quite clear what you need to do here - I think you are trying to show/hide a form element when the checkbox changes. If so then you can do this using the Events tab of the checkbox element.
​
If you are trying to stop form submission if the checkbox isn't checked then you can do that by making the Checkbox element required on the Validation tab.
​
I'm not sure about your JavaScript itself - it looks as if it should be OK. How are you calling the function.
​
Bob
Kr Kronosites 02 Apr, 2018
Hello GreyHead,
​
What I'm trying to do is to give the users a special button that check if all variables are fullfilled or not (according to specific conditions)
I have onClick event that calls the function.
​
The function check each variable 1 by 1 (each input field), and if specific conditions are OK, the form is submitted ("if" statement of my javascript code).
If not, another div appears ("else" statement of my javascript code).
​
Using this code with simple text inputs (free text, date, etc.) all works fine.
​
But I cannot check a checbox input doing "if (document.getElementById("id").value == 1", because checked or not value is always = 1.
Neither can do "if (document.getElementById("id").checked) { do something }". I try it and it doesn't work.
​
Asking on StackOverflow my code must work, but something must be different inside Chronoforms on checkboxes.
​
Hope you can help me.
Thanks.
Gr GreyHead 02 Apr, 2018
Answer
1 Likes
Hi Kronosites,
​
This works - set to show/hide a couple of divs
jQuery(document).ready(function(jQ){
jQ('#checkbox1').click( function() {
if ( jQ('#checkbox1').prop('checked') ) {
jQ('#checked').show();
jQ('#not_checked').hide()
} else {
jQ('#checked').hide();
jQ('#not_checked').show();
}
});
});
It might be simpler to do your validation using CFv5's Custom validation functions and/or the Events tabs.
​
Bob
Kr Kronosites 02 Apr, 2018
Many thanks GreyHead! You rules!
​
Above I let my code using javascript & your JQuery, thanks for all!
​
>> Example:
You have a form with a text field and a check box. If user click on the checkbox it means that the text field is "unknowded".
Both inputs are required in Chronoforms, but if the user clic on a button we want to show a div with an advertisment.
Here is the working code:
function confSubmit(form) {
jQuery(document).ready(function(jQ) {
if ( (jQ('#checkbox').prop('checked') || document.getElementById("textfield").value != "" )) {
form.submit();
} else {
$("#empty").toggle('show');
location.hash = "#empty";
}
});
}
This topic is locked and no more replies can be posted.