Question

I am trying to create a simple way to force a single checkbox to display “No” in a form submission if left unchecked, or clicked off. I’ve tried a number of ways and this is the closest I can get, but it still isn’t working properly.

Any help is much appreciated.
Matt

$(function opt() {
        if ($("#optIn").is(":checked")) {
            $("#optIn").value="Yes"
            $("#optIn").click(function() { this.value="No" })
        } else {
            $("#optIn").value="No"
            $("#optIn").click(function() { this.value="Yes" })
        }
    return false
});

opt();

Answer 1

So to start out quite frankly, I’m not sure where you saw that sort of function setup before. You’re code, as-is, could be reduced to this:

$(function() { // on DOM ready (when the DOM is finished loading)
    $('#optIn').click(function() { // when the checkbox is clicked
        var checked = $('#optIn').is(':checked'); // check the state
        $('#optIn').val(checked ? "Yes" : "No"); // set the value
    });
    $('#optIn').triggerHandler("click"); // initialize the value
});

The value of the checkbox, however, is never displayed on the screen. You may need to update a separate field with the values “Yes” or “No”, such as:

<input type="checkbox" id="optIn" />
<span id="optInLabel"/>No</span>

And the script:

$(function() { // on DOM ready (when the DOM is finished loading)
    $('#optIn').click(function() {
        optIn(this);
    });
    optIn($('#optIn')[0]);
});

function optIn(el) {
    var checked = $(el).is(':checked'); // check the state
    $('#optInLabel').html(checked ? "Yes" : "No"); // set the value
}

EDIT: Working jsFiddle

If you need to check whether the box is checked on the server-side post-form-submission, then you could also update a hidden input field with the value “Yes” or “No” and ignore the submitted checkbox element value (as jaredhoyt mentioned in his answer).