我更喜欢不需要javascript的解决方案(是的，我知道现在会有一些人把我归为勒德分子)，但如果你像我一样，你想要能够显示复选框的默认/初始设置，然后让它保持或更新基于提交的表单，试试这个(建立在上面的几个想法上):

设置确定初始复选框状态的变量，然后使用服务器检查确定每次提交表单后的显示。

下面的例子创建了一个数组的数组(用于WordPress;同样适用于其他地方)，然后使用服务器脚本确定复选框的状态，而不使用隐藏字段或javascript。

<?php

$options_array = array (
    array('list_companies_shortcode' , 'shortcode_list_companies' , 'List Companies Shortcode'),
    array('list_contacts_shortcode' , 'shortcode_list_contacts' , 'List Contacts Shortcode'),
    array('test_checkbox_1' , 'checked' , 'Label for Checkbox 1' , 'checkbox' , 'Some text to instruct the user on this checkbox use' ),
    array('test_checkbox_2' , '' , 'Label for Checkbox 2' , 'checkbox' , 'Some other text to instruct the user on this checkbox use' )
 ) ;


$name_value_array = array() ;
$name_label_array = array() ;
$field_type_array = array() ;
$field_descriptor_array = array() ;
foreach ( $options_array as $option_entry ) {
    $name_value_array[ $option_entry[0] ] = $option_entry[1] ;
    $name_label_array[ $option_entry[0] ] = $option_entry[2] ;
    if ( isset( $option_entry[3] ) ) {
        $field_type_array[ $option_entry[0] ] = $option_entry[3] ;
        $field_descriptor_array[ $option_entry[0] ] = $option_entry[4] ;
    } else {
        $field_type_array[ option_entry[0] ] = 'text' ;
        $field_descriptor_array[ $option_entry[0] ] = NULL ;
    } 
}

echo "<form action='' method='POST'>" ;
    foreach ( $name_value_array as $setting_name => $setting_value ) {
        if ( isset( $_POST[ 'submit' ] ) ) {
            if ( isset( $_POST[ $setting_name ] ) ) {
                $setting_value = $_POST[ $setting_name ] ;
            } else {
                $setting_value = '' ;
            }
        }   
        $setting_label = $option_name_label_array[ $setting_name ] ;
        $setting_field_type = $field_type_array[ $setting_name ] ;
        $setting_field_descriptor = $field_descriptor_array [ $setting_name ] ;
        echo "<label for=$setting_name >$setting_label</label>" ;
        switch ( $setting_field_type ) {
            case 'checkbox':
                echo "<input type='checkbox' id=" . $setting_name . " name=" . $setting_name . " value='checked' " . $setting_value . " >(" . $setting_field_descriptor . ")</input><br />" ;
                break ;
            default:
                echo "<input type='text' id=" . $setting_name . " name=" . $setting_name . " value=" . $setting_value . " ></input><br />" ;
        }
    }
    echo "<input type='submit' value='Submit' name='submit' >" ;
echo "</form>" ;

为不同ID的复选框添加一个隐藏输入:

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

在提交表单之前，根据检查的条件禁用隐藏输入:

form.addEventListener('submit', () => {
    if(document.getElementById("testName").checked) {
        document.getElementById('testNameHidden').disabled = true;
    }
}

我使用这个jQuery块，它将在提交时为每个未选中的复选框添加一个隐藏输入。它将保证您每次都为每个复选框提交一个值，而不会弄乱您的标记，并冒着忘记在稍后添加的复选框上执行此操作的风险。它也与您正在使用的任何后端堆栈(PHP、Ruby等)无关。

// Add an event listener on #form's submit action...
$("#form").submit(
    function() {

        // 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', "0"); // 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()
);      // end submit() argument list

Ajax动作的例子是(':checked')使用jQuery而不是.val();

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

参数将得到TRUE或FALSE的值。

这个解决方案的灵感来自@desw的一个。

如果您的输入名称是“表单样式”的，那么只要选中一个复选框，您就会失去与复选框值的数组索引关联，每次选中一个复选框，这种“分离”就增加一个单元。这可能是用于插入由某些字段组成的雇员的表单的情况，例如:

<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />

如果您一次插入三个员工，并且第一个和第二个员工是单个的，那么您最终将得到一个5元素的isSingle数组，因此您将不能一次遍历三个数组，例如，为了在数据库中插入员工。

你可以用一些简单的数组后处理来克服这个问题。我在服务器端使用PHP，我这样做:

$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
  if($isSingle=='yes'){
    unset($areSingles[$j-1]);
  }
  $j++;
}
$areSingles = array_values($areSingles);

我的做法有点不同。首先，我更改了所有未选中复选框的值。到“0”，然后全部选中，因此该值将被提交。

函数checkboxvalues () { $ (" # checkbox-container输入:复选框"). each函数({ if ($ () .prop(“检查”)! = true) { (美元).val(“0”); (美元)。道具(“检查”,真正的); ｝ })； ｝