javascript - Opt-inOpt-out Checkbox - Stack Overflow

admin管理员组

文章数量:1314320

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();

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();

• javascript
• jquery
• checkbox

Share Improve this question Follow edited May 16, 2012 at 1:09 Ayush 42.5k5151 gold badges168168 silver badges241241 bronze badges asked May 16, 2012 at 1:07 matt _matt _ 2511 silver badge44 bronze badges 2

• 2 1. JQuery object don't have the .value property as far as I remember. You should use .val("newvalue") when you want to change the value. 2. Changing the value won't print anything in the screen, it's just the checkbox's value which will be sent when you submit the form. You'd have to create a <span> with the label for it which you'd like to edit with .html("newlabel") if you want to display something in the form, which is what you want apparently. – Fabrício Matté Commented May 16, 2012 at 1:15
• I think both of your click() handlers will get placed on the control and both will get executed. – Jason Goemaat Commented May 16, 2012 at 1:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

An unchecked checked box is not a successful control and is therefore not POSTed with the rest of the form data.

The easiest solution for this is to create a hidden input with the same name as your checkbox that will contain the "unchecked" value:

<input type="hidden" name="myCheckbox" value="No" />
<input type="checkbox" name="myCheckbox" value="Yes" />

This will cause the form to POST myCheckbox=No if the checkbox is left unchecked.

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).

Use radio buttons:

<span>Opt in?</span>
<br>
<input type="radio" name="optIn" value="no" checked>No&nbsp;
<input type="radio" name="optIn" value="yes">Yes

No javascript required, works in every browser, no shims, no libraries, nothing.

本文标签： javascriptOptinOptout CheckboxStack Overflow