jQuery的 - serializearray（）沒有得到選中的複選框的值

Question

我有一個複選框作爲一個標誌的形式。

爲了做到這一點，我添加了一個隱藏的輸入元素，因此如果未選中該複選框，東西仍然被保存

<form action=""> 
    ... 
     <input type="hidden" name="foo" value="no" /> 
     <input type="checkbox" name="foo" value="yes"> 
    ... 
</form> 

我遇到的問題是，當我

1. 選中複選框
2. 然後形式上運行jQuery.serializeArray（）

爲foo元素設置的值爲「否」

Object { name="foo", value="no"} 

不應該serializeArray（）模擬瀏覽器行爲？如果是這樣，如果複選框被選中，不應該返回「是」嗎？

我使用jQuery v1.10.2的

Answer 1

在很短的一句話：否。serializeArray方法只返回它是檢查的情況下的複選框。因此，只要未被選中，它就會忽略。 但是，如果您檢查了它，它將直接返回您輸入的值。

查看演示http://api.jquery.com/serializearray/。

Answer 2

在具有多個同名輸入的表單上使用serializeArray會爲每個元素返回多個對象（如果選中）。這意味着以下HTML將返回以下對象。所以有問題的數據在那裏並且可用。正因爲如此，我假設你試圖將數據操作爲1個對象，或者將它發佈到服務器，該服務器僅考慮來自具有該密鑰的第一個值的數據。你只需要確保任何checkbox元素都優先。

返回的對象：

[ 
    { 
     name:"foo", 
     value:"no" 
    }, 
    { 
     name:"foo2", 
     value:"no" 
    }, 
    { 
     name:"foo2", 
     value:"yes" 
    } 
] 

HTML：

<form> 
    <input type="hidden" name="foo" value="no" /> 
    <input type="checkbox" name="foo" value="yes" /> 

    <input type="hidden" name="foo2" value="no" /> 
    <input type="checkbox" name="foo2" value="yes" checked /> 
</form> 

JS：

console.log($('form').serializeArray()); 

DEMO

另一種方法可以做到這一點的就是擺脫隱藏的字段，並且在您提交表單之前，請檢查每個未選中的複選框，並檢查serializeArray中是否有任何具有相同名稱的數據。如果不是隻是在那裏添加它作爲off。

$('#submit').on('click', function(){ 
    var arr = $('form').serializeArray(), 
     names = (function(){ 
      var n = [], 
       l = arr.length - 1; 
      for(; l>=0; l--){ 
       n.push(arr[l].name); 
      } 

      return n; 
     })(); 

    $('input[type="checkbox"]:not(:checked)').each(function(){ 
     if($.inArray(this.name, names) === -1){ 
      arr.push({name: this.name, value: 'off'}); 
     } 
    }); 

    console.log(arr); 
}); 

DEMO

Answer 3

的多個字段使用相同的名稱是有問題的，充其量，也沒有標準化的方式，前端系統或後端系統，將處理它。

使用相同名稱的唯一原因是，如果你想通過某種默認值，就像你在下面的情況下，你在哪裏做一個簡單的是/否。

你想要什麼，模仿瀏覽器，是serialize方法，而不是serializeArray。

我加入了形式到頁面 - 從我的控制檯：

JSON.stringify(f.serializeArray()); 
"[{"name":"foo","value":"no"}]" 

NO對號

JSON.stringify(f.serialize()); 
""foo=no"" 

對號

JSON.stringify(f.serialize()); 
""foo=yes&foo=no"" 

如果您的後端系統感到困惑並且正在採摘錯誤的值，顛倒你的複選標記和隱藏元素的順序。