Question

我正在尝试创建一种简单的方法来强制单个复选框在表单提交中显示“否”（如果未选中或单击关闭）。我已经尝试了很多方法，这是我能得到的最接近的方法，但它仍然无法正常工作。

非常感谢任何帮助。马特

$(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

未选中的复选框不是successful control，因此不会使用其余的表单数据进行POST。

最简单的解决方案是创建一个隐藏的输入，其名称与包含“未选中”值的复选框相同：

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

如果未选中复选框，则会导致表单POST myCheckbox=No。

Answer 2

所以坦率地说，我不确定你之前在哪里看过那种功能设置。你的代码原样可以简化为：

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

然而，复选框的value永远不会显示在屏幕上。您可能需要使用值“是”或“否”更新单独的字段，例如：

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

脚本：

$(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
}

编辑：Working jsFiddle

如果您需要检查是否在服务器端的表单提交后选中了该框，那么您还可以使用值“是”或“否”更新隐藏的输入字段，并忽略提交的复选框元素值（正如他在答案中提到的jaredhoyt）。

Answer 3

使用单选按钮：

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

不需要javascript，适用于每个浏览器，没有垫片，没有库，没有。

选择加入/退出复选框

3 个答案: