我有一堆默认选中的复选框。我的用户可能会取消选中一些复选框(如果有的话),并选中其余的复选框。

是否有任何方法使表单POST未选中的复选框,而不是选中的复选框?


当前回答

我先试了山姆的版本。 好主意,但它会导致表单中有多个具有相同名称的元素。如果您使用任何基于名称查找元素的javascript,它现在将返回一个元素数组。

我已经在PHP中解决了Shailesh的想法,它为我工作。 这是我的代码:

/* Delete '.hidden' fields if the original is present, use '.hidden' value if not. */
foreach ($_POST['frmmain'] as $field_name => $value)
{
    // Only look at elements ending with '.hidden'
    if ( !substr($field_name, -strlen('.hidden')) ) {
        break;
    }

    // get the name without '.hidden'
    $real_name = substr($key, strlen($field_name) - strlen('.hidden'));

    // Create a 'fake' original field with the value in '.hidden' if an original does not exist
    if ( !array_key_exists( $real_name, $POST_copy ) ) {
        $_POST[$real_name] = $value;
    }

    // Delete the '.hidden' element
    unset($_POST[$field_name]);
}

其他回答

这是对之前答案的一种尝试,以自动保留具有特定值(在本例中为0)的未选中复选框,而不会在提交时选中所有复选框。

$("form").submit(function () {
    let this_master = $(this);

    // Remove any of the hidden values that may already be there (if the user previously canceled the submit)
    this_master.find("*[id^='hiddenchkinput_']").remove();

    // Get all unchecked checkboxes
    this_master.find('input:checkbox:not(:checked)').each(function () {
      let thisChk = $(this);

      // Create a hidden input with the same name as the checkbox
      let newInput = document.createElement('input');
      $(newInput).attr('name', thisChk.attr('id'))
        .attr('id', 'hiddenchkinput_' + thisChk.attr('id'))
        .attr('type', 'hidden')
        .val('0');
      // Append the new input to the end of the form
      this_master.append(newInput);
    });
})

@cpburnz说对了,但是代码太多了,下面是使用更少代码的相同想法:

JS:

// jQuery OnLoad
$(function(){
    // Listen to input type checkbox on change event
    $("input[type=checkbox]").change(function(){
        $(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
    });
});

HTML(注意字段名使用数组名):

<div>
    <input type="checkbox" checked="checked">
    <input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
    <input type="checkbox">
    <input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>

对于PHP:

<div>
    <input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
    <input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>

我用JavaScript解决了这个问题:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

注意在这两个输入元素之间不要有任何空格或换行符!

你可以使用this.previousSibling.previousSibling来获取“上层”元素。

使用PHP,您可以检查命名隐藏字段为0(未设置)或1(设置)。

您不需要为所有复选框创建一个隐藏字段,只需复制我的代码。 它会改变复选框的值,如果不选中,值将赋值为0,如果选中复选框,则将值赋值为1

$("form").submit(function () {

    var this_master = $(this);

    this_master.find('input[type="checkbox"]').each( function () {
        var checkbox_this = $(this);


        if( checkbox_this.is(":checked") == true ) {
            checkbox_this.attr('value','1');
        } else {
            checkbox_this.prop('checked',true);
            //DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA    
            checkbox_this.attr('value','0');
        }
    })
})

当提交时复选框未选中时,将复选框的值更新为'NO'并设置checked = 'TRUE'

https://jsfiddle.net/pommyk/8d9jLrvo/26/

$(document).ready(function() 
{
  function save() 
  {
    if (document.getElementById('AgeVerification').checked == false) 
    {
      document.getElementById('AgeVerification').value = 'no';
      document.getElementById('AgeVerification').checked = true;     
    }
  }
  document.getElementById("submit").onclick = save;
})