使用jQuery用隐藏字段动态替换复选框


Dynamically substituting checkboxes with hidden fields using jQuery

由于复选框只有在选中时才会发送其内容,但我的服务器端脚本需要所有复选框(值为'Y'或'N'的已选中和未选中字段),因此我需要用相同名称的隐藏输入字段动态替换复选框表单字段(其功能)。所以我需要jQuery脚本,它将执行以下操作;

  • 对于我的页面上的每个复选框输入字段,它应该动态插入与复选框同名的隐藏输入字段
  • 它应该将onclick监听器添加到所有复选框字段中,当选中复选框时,这些字段会将上一个隐藏字段设置为"Y",否则设置为"N"
  • 删除复选框输入字段的名称,以避免在向服务器发送表单内容时发生命名冲突(不确定是否真的需要这样做)

所以jQuery的当前状态应该是:

<input type="checkbox" name="name1" checked="checked" />
<input type="checkbox" name="name2" />

动态替换为:

<input type="hidden" name="name1" value="Y" />
<input type="checkbox" checked="checked" onclick="function()"/>
<input type="hidden" name="name2" value="N" />
<input type="checkbox" onclick="function()"/>

或者在提交表单之前,将复选框字段替换为具有相应值的隐藏字段。

function()可以是noname,并动态分配给复选框,并根据复选框状态用"Y"或"N"更改以前的隐藏字段。

给定此html

<input type="hidden" name="myname_hidden" value="" />
<input type="checkbox" name="myname"/>

你可以使用这样的jQuery:

$("form").on('submit', function() {
  $('input[type="checkbox"]').each(function(){
    var $t=$(this);
    var isset = $t.prop('checked') ? 'Y' : 'N';
    $('input[name="'+$t.attr('name')+'_hidden"]').val(isset);
  });
});

创建一个y/n值数组并将该数组发送到服务器怎么样?您可以循环使用复选框,如果选中了复选框,则将nameAttribute:Y添加到阵列中。如果未选中,则将数组值设为"N"。

这里有一个例子:

function updateInputs() {
    checkboxes.each(function () {
        var name = this.name;
        if (this.checked) {
            myArray[name] = 'Y';
        } else {
            myArray[name] = 'N';
        }
    });
    myArray = [];
}