You're pretty close, just a couple of fixes.
First, you're not including jQuery in your JS fiddle.
Secondly, your toggleCheckbox
function is not in the global scope, so it can't be accessed inline.
Lastly, you'd need to update your appear/disappear functions. It seemed like they weren't toggling both the checkbox and the button in the same way.
Updated Code
HTML
<input type="checkbox" name="toggle" id="toggle" />
<input type="button" value="Open" id="surveyButton" /> <!--removed inline JS-->
JavaScript
function toggleCheckbox() { //moved function to global scope, if you wanted to add the listner inline you'd do it this way.
if($("#toggle").is(':checked')) {
SurveyAppear();
} else {
SurveyDisappear();
}
}
var SurveyAppear = function() {
$("#surveyButton").prop('value', 'Open'); //switched from Close
$("#toggle").prop('checked', false); //changed to false
}
var SurveyDisappear = function() {
$("#surveyButton").prop('value', 'Close'); //switched from Open
$("#toggle").prop('checked', true);
}
document.getElementById("surveyButton").addEventListener("click", toggleCheckbox, false);
See it working in the updated fiddle. https://jsfiddle.net/igor_9000/mL0uLx81/2/
Hope that helps!