Javascript 选择加入/选择退出复选框

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

非常感谢您的帮助。 马特

---

坦白地说，我不确定你以前在哪里见过这种函数设置。您的代码可以简化为：

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

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

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

编辑：

---

如果您需要检查服务器端post表单提交时是否选中了复选框，那么您还可以使用值Yes或No更新一个隐藏的输入字段，并忽略jaredhoyt在回答中提到的提交的复选框元素值。

因此，坦率地说，我不确定你以前在哪里见过这种函数设置。您的代码可以简化为：

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

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

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

编辑：

---

如果您需要检查服务器端post表单提交时是否选中该框，然后，您还可以使用值Yes或No更新隐藏的输入字段，并忽略jaredhoyt在回答中提到的提交的复选框元素值。

未选中的复选框不是，因此不会与表单的其余数据一起发布

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

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

---

如果复选框未选中，这将导致表单发布myCheckbox=No。

未选中的复选框不是，因此不会与表单的其余数据一起发布

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

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

如果复选框未选中，这将导致表单发布myCheckbox=No。

使用单选按钮：

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

无需javascript，可在每个浏览器中使用，无垫片、无库、无任何内容。

使用单选按钮：

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

---

---

不需要javascript，可以在每个浏览器中使用，没有垫片，没有库，什么都不需要。

1。据我记忆所及，JQuery对象没有.value属性。要更改值时，应使用.valnewvalue。2.更改值不会在屏幕上打印任何内容，只是提交表单时发送的复选框值。如果要在表单中显示某些内容（这显然是您想要的），则必须使用要使用.htmlnewlabel编辑的标签创建一个。我认为两个单击处理程序都将放置在控件上，并且都将被执行。1。据我记忆所及，JQuery对象没有.value属性。要更改值时，应使用.valnewvalue。2.更改值不会在屏幕上打印任何内容，只是提交表单时发送的复选框值。如果要在表单中显示某些内容，则必须使用要使用.htmlnewlabel编辑的标签创建一个，这显然是您想要的。我认为您的两个单击处理程序都将被放置在控件上，并且都将被执行。仅设置复选框的值是不够的，因为未选中的复选框不会与发布的数据一起提交。您还必须添加一个表单提交事件处理程序，以便在提交之前手动选中该框。快速书写技能，+1用于范围标签。仅设置复选框的值是不够的，因为未选中的复选框将不会与发布的数据一起提交。您还必须添加一个表单提交事件处理程序，以便在提交之前手动选中该框。快速书写技能，+1表示范围标签。如果选中，复选框值是否覆盖隐藏值？HTML的顺序对这有影响吗？我注意到attr的名字是一样的。谢谢是我错了还是这不太必要。。？比方说，假设OP只有1个myCheckbox，可以选中也可以不选中，如果在提交表单时没有选中，OP可能会完全测试是否$_在php中发布['myCheckbox']，并假设它未被选中，在php本身中为其赋值为No。这个问题与PHP无关，我也不知道其他服务器端语言，但请留待思考。@fabriciomatté-Java的行为方式与参数为null的方式相同。事实上，我打赌许多语言都以相同的方式处理它，因为和HTTP是标准的…@jmort253-是的，第二个值将覆盖隐藏的输入，输入的顺序确实很重要。如果两个或更多成功的表单控件具有相同的名称，则即使没有[]后缀，也肯定会提交所有表单控件。添加[]以使多个值具有相同的参数名是PHP可以做到的事情

---

es不适用于所有服务器端技术，这对浏览器没有任何影响。如果选中复选框值，复选框值是否覆盖隐藏值？HTML的顺序对这有影响吗？我注意到attr的名字是一样的。谢谢是我错了还是这不太必要。。？比方说，假设OP只有1个myCheckbox，可以选中也可以不选中，如果在提交表单时没有选中，OP可能会完全测试是否$_在php中发布['myCheckbox']，并假设它未被选中，在php本身中为其赋值为No。这个问题与PHP无关，我也不知道其他服务器端语言，但请留待思考。@fabriciomatté-Java的行为方式与参数为null的方式相同。事实上，我打赌许多语言都以相同的方式处理它，因为和HTTP是标准的…@jmort253-是的，第二个值将覆盖隐藏的输入，输入的顺序确实很重要。如果两个或更多成功的表单控件具有相同的名称，则即使没有[]后缀，也肯定会提交所有表单控件。添加[]使多个值具有相同的参数名是一件PHP事情，它不适用于所有服务器端技术，对浏览器也没有任何影响。