2016-08-30 59 views
0

我创建了一个带有多个复选框的表单,我想将选中的复选框的值设置为“yes”,未勾选的复选框的值设置为“no”。我主持我的表单的网站不允许我添加具有相同名称和不同值的隐藏字段,因此我必须找到将在提交时添加隐藏复选框的脚本,并包含“否”的值。目前,当我提交表单时,未检查框被记录为未定义,但出于数据目的,我需要填写“否”。如何给未选中的复选框赋值

以下是我发现:

$(document).ready($("#foo").submit(
    function() { 

    // Add an event listener on #foo submit action... 
    // For each unchecked checkbox on the form... 
    $(this).find($("input:checkbox:not(:checked)")).each(

     // Create a hidden field with the same name as the checkbox and a value of 0 
     // You could just as easily use "off", "false", or whatever you want to get 
     // when the checkbox is empty. 
     function(index) { 
     var input = $('<input />'); 
     input.attr('type', 'hidden'); 
     input.attr('name', $(this).attr("name")); // Same name as the checkbox 
     input.attr('value', "no"); // or 'off', 'false', 'no', whatever 

     // append it to the form the checkbox is in just as it's being submitted 
     var form = $(this)[0].form; 
     $(form).append(input); 

     } // end function inside each() 
    ); // end each() argument list 

    return true; // Don't abort the form submit 

    } // end function inside submit() 
)); 

为什么不工作的脚本?

+2

准备处理程序的Ypur synthax是错误的,检查任何基本的例子。顺便说一句,你的缩进是awfull,让你的代码不可读 –

+0

这是什么意思'var form = $(this)[0] .form' ... forms有一个.form属性? – cuniculus

+0

这需要大量的调试......在每个点输出具有变量值的控制台消息是很好的,以查看您的函数是否正在运行以及变量是否获得您期望的值。 – cuniculus

回答

0

我能够使用这个更简单的脚本。完美的作品。

$('#foo').click(function() { 
    $(this).find('input[type="checkbox"]').each(function() { 
     var checkbox = $(this); 
     if(checkbox.is(':checked')) { 
      checkbox.attr('value','yes'); 
     } else { 
      checkbox.after().append(checkbox.clone().attr({type:'hidden', value:'no'})); 

     } 
    }); 
}); 
0

您需要使用$(this)更改输入。在。每个函数$(this)将引用复选框本身。

+0

我能够改变每个功能的输入,我仍然没有收到“no”值 – cgrouge

+0

你不能在输入类型复选框上发送一个没有值它将是一个布尔值,你必须先删除输入类型复选框提交和替换他们的输入隐藏 – bormat

+0

你可以用“prepend”替换“append”,我认为它会起作用 – bormat

0

这是不正常有severals输入具有相同名称,你可以直接把值复选框

$(this).find($("input:checkbox:not(:checked)")).each(function(){ 
    $(this).val($(this).is(':checked') ? "yes" : "no") 
}) 
+0

请注意,三元组在这里没用,因为它只是不被检查 – bormat

+0

我添加了一个具有相同名称但脚本停止工作的第二个字段,取得了一些成功。使用你的建议,我仍然没有得到未经检查的复选框的新值。我只看到未定义。 – cgrouge

+0

如果您希望显示值,则该值不会显示在此属性中替换$(this).val(由$(this).attr('value, – bormat

2
  1. 您需要检查jQuery的API文档

$(document).ready(function(){});它需要函数回调,这可能不需要。

$("#foo").submit需要函数回调,它将在表单提交之前被调用。

无需在$.find

包裹选择
  • 您需要弄清楚的this
  • $(this).attr("name")this上下文所指的输入框

    this in $(this)[0].form仍然是输入框

    我想你试图得到forms的参考。你可以使用document.forms

    +0

    我已经对脚本进行了编辑,但仍然看不到预期的结果:https://jsfiddle.net/gvd1jr0o/1/ – cgrouge

    +0

    请让我知道您的想法在更新后的脚本中,我仍然没有在未勾选的复选框中获得一个值 – cgrouge

    +0

    @cgrouge看看更新后的jsfiddle:https://jsfiddle.net/gvd1jr0o/6/ –

    相关问题