Question

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

          <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。怎么做？

Answer 1

您可以尝试这样做吗？您需要使用单独的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);
    });

Answer 2

从复选框
为隐藏的输入提供一个新的ID，如checkbeer

$（'＃checkbeer'）。on（'change'，function（）{
$（'＃beer'）。val（this.checked？1：0）; }）改变（）;

Answer 3

  <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" ));
 });

Answer 4

你实际上并不需要js。您需要做的就是写入隐藏字段AFTER复选框，并将复选框的值设置为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的工作方式

Answer 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

Answer 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;
}
});

未选中复选框时发送值0

6 个答案: