未选中复选框时发送值 0答案

【问题标题】：Send value 0 when checkbox is not checked未选中复选框时发送值 0
【发布时间】：2013-11-22 06:57:01
【问题描述】：

我有一个带有复选框的表单，如下所示

          <div class="col-xs-5 drinkingLeft">
            <input type='hidden' value='0' name='beer'>             
            <input type="checkbox" name="beer" id="beer"class="require-one col-xs-1" value="0"/>
            <label for="beer" class="col-xs-10">Beer
            </label>
          </div>

在 js 中我正在执行以下操作

$('#beer').on('change', function () {
  this.value = this.checked ? 1 : 0;
}).change();

我想要的是，当复选框为复选框时，发送值 1 或发送值 0。如果我没有隐藏的输入字段

        <input type='hidden' value='0' name='beer'>

然后它确实为该字段发送 1。但是，我还想确保在未检查时发送值 0。该怎么做？

【问题讨论】：

在小提琴中尝试了您的代码。它可以工作jsfiddle.net/4qerZ
只需删除复选框名称（现在您有 2 个名称为 beer 的输入）并使隐藏的输入与它同步值（无名称，无值提交）
@MarsOne 我想要的是，当复选框为复选框时，发送值 1 或发送值 0。

标签： javascript html

【解决方案1】：

从复选框中删除 name="beer"
给隐藏的输入一个新的ID，比如checkbeer

$('#checkbeer').on('change', function () {
$('#beer').val(this.checked ? 1 : 0); }).change();

【讨论】：

【解决方案2】：

  <div class="col-xs-5 drinkingLeft">
       <input type='hidden' value='0' name='hidden'>             
       <input type="checkbox" name="beer" id="beer"class="require-one col-xs-1" value="0"/>
       <label for="beer" class="col-xs-10">Beer
       </label>
  </div>



 $('#beer').on('change', function () {
      $("#beerhidden").val($(this).prop( "checked" ));
 });

【讨论】：

【解决方案3】：

你可以试试这个吗，你需要使用单独的id和name作为隐藏值id ="beerhidden"。

  <div class="col-xs-5 drinkingLeft">
        <input type='hidden' value='0' id ="beerhidden" name='beerhidden'>             
        <input type="checkbox" name="beer" id="beer"class="require-one col-xs-1" value="0"/>
        <label for="beer" class="col-xs-10">Beer
        </label>
  </div>

    $('#beer').on('change', function () {
       $("#beerhidden").val(this.checked ? 1 : 0);
    });

【讨论】：

服务器如何知道取哪个？第一个还是第二个？这取决于服务器到服务器/后端到后端语言，对吗？ PHP 可能取第二个值，而 java 取第一个。所以你的答案不适用于所有情况......可能。你应该只看到一个。我只需要发送一个！

【解决方案4】：

你实际上不需要 js。您需要做的就是在复选框之后编写隐藏字段并将复选框的值设置为 1：

<div class="col-xs-5 drinkingLeft">
   <input type="checkbox" name="beer" id="beer"class="require-one col-xs-1" value="1"/>
   <input type='hidden' value='0' name='beer'>             
   <label for="beer" class="col-xs-10">Beer
   </label>
</div>

这样做：如果选中复选框，则发布：1 如果不是，则隐藏发布：0

仅供参考：这就是 Microsoft ASP.Net MVC 的工作方式

【讨论】：

谢谢。但这会发送两个值
其实，是的！然后，它必须取决于服务器如何获得价值。 MVC 框架丢弃了我猜的第二个值...
感谢您的解决方案。我能够根据此处的所有答案制定解决方案。意识到要走的路是放置一个隐藏字段，然后在需要时禁用。

【解决方案5】：

你可以这样做

$("form").submit(function(event) {
    $(this).find("input:not(:checked)").each(function() {
        var hidden = $("<input/>").attr({
                type: "hidden",
                name: input.attr("name"),
                value: "0",
            });
        hidden.insertAfter(this);
    });
});

提交表单时，这会在每个未检查的输入之后插入一个隐藏输入，其值为 0。

See the jsfiddle in action

【讨论】：

【解决方案6】：

如下解决

<div class="col-xs-5 drinkingLeft">
<input type="checkbox" name="beer" id="beer"class="require-one col-xs-1" value="0"/>
<input id='beerHidden'  type='hidden' value='0' name='beer'>   
<label for="beer" class="col-xs-10">Beer </label>
</div>


 $('#beer').on('change', function () {
this.value = this.checked ? 1 : 0;
 }).change();

$("#submit").click(function () {
if(document.getElementById("beer").checked){
document.getElementById('beerHidden').disabled = true;
}
});

【讨论】：