jQuery serialize不会注册复选框

Question

我正在使用jQuery.serialize来检索表单中的所有数据字段.

我的问题是它没有检索未选中的复选框.

它包括:

<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" checked="checked" />

但不是这个

<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" />

如何获取未选中的复选框的"值"？

Answer 1

为了建立在azatoth的天才答案上,我为我的场景略微扩展了它:

    /* Get input values from form */
    values = jQuery("#myform").serializeArray();

    /* Because serializeArray() ignores unset checkboxes and radio buttons: */
    values = values.concat(
            jQuery('#myform input[type=checkbox]:not(:checked)').map(
                    function() {
                        return {"name": this.name, "value": false}
                    }).get()
    );

Answer 2

jQuery的 serialize非常模仿标准表单在被附加到请求中的查询字符串或POST主体之前如何被浏览器序列化.浏览器不包含未选中的复选框,这是有道理的,因为它们具有布尔状态 - 它们由用户选择(包括)或未由用户选择(未包括).

如果你需要它在序列化中,你应该问自己"为什么？为什么不检查它在数据中的存在？".

请记住,如果JavaScript序列化表单数据的方式与浏览器的行为方式不同,那么您将消除表单优雅降级的任何可能性.如果您仍然绝对需要这样做,只需使用<select>带有是/否的框作为选项.至少那时,禁用JS的用户不会与您的站点疏远,并且您不会违反HTML规范中定义的行为.

<select id="event_allDay" name="event_allDay">
   <option value="0" selected>No</option>
   <option value="1">Yes</option>
</select>

我曾经在一些网站上看到过这种情况,并且总是在想,"为什么他们不使用复选框"？

Answer 3

你没有,因为序列化意味着用作查询字符串,并且在该上下文中,未选中意味着它根本不在查询字符串中.

如果您确实想要获取未选中复选框的值,请使用:(未经测试的课程)

var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();

Answer 4

如果要在查询字符串中添加未序列化的复选框,请将以下内容添加到jquery提交函数中:

var moreinfo = '';

$('input[type=checkbox]').each(function() {     
    if (!this.checked) {
        moreinfo += '&'+this.name+'=0';
    }
});

Answer 5

jQuery 序列化获取输入的 value 属性。

现在如何让复选框和单选按钮工作？如果您将复选框或单选按钮的点击事件设置为 0 或 1，您将能够看到更改。

$( "#myform input[type='checkbox']" ).on( "click", function(){
     if ($(this).prop('checked')){
          $(this).attr('value', 1);
     } else {
          $(this).attr('value', 0);
     }
 }); 

 values = $("#myform").serializeArray();

以及当您想设置复选框时检查状态，例如 php

<input type='checkbox' value="<?php echo $product['check']; ?>" checked="<?php echo $product['check']; ?>" />