如何在formfields中使用複選框來製作json數組和對象

Question

這裏我有一個表單和一個表單字段，即複選框，在檢查了三個字段之後，我想要製作JSON格式，但是我無法做到這一點，如果任何人都知道請更新我的答案。

function rentfunction(){ 
 
var arr1 = []; 
 
\t \t \t $.each($("input[name='furniture_check']:checked"),function(){ 
 
\t \t \t var furniture = $(this).val(); 
 
\t \t \t arr1.push(furniture); 
 
\t \t \t }); 
 

 
\t \t \t var data = { 
 
\t \t \t \t "rentProperty" :{ 
 
\t \t \t \t \t "furnitureType" :arr1, 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t console.log(data); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<form> 
 
\t <input type="checkbox" name="furniture_check" value="Ward robe">Ward robe <br> 
 
\t <input type="checkbox" name="furniture_check" value="Lights">Lights <br> 
 
\t <input type="checkbox" name="furniture_check" value="Fan">Fan <br> 
 
\t <input type="checkbox" name="furniture_check" value="Fridge">Fridge <br><br><br> 
 
    
 
    <button type="button" id="rentBtnSubmit" onclick="rentfunction()">Submit</button> 
 
</form>

預期的答案

假如我是點擊病房長袍&燈&冰箱，我點擊提交按鈕意味着我要讓JSON這樣

{ 
     "rentProperty": 
     { 
     "fullName" : "Some Name" 
     }, 
     "floorType": [ 
         { 
          "floorTypeName": "Ward robe" 
         }, 
         { 
          "floorTypeName" :"Lights" 
         }, 
         { 
          "floorTypeName" :"Fridge" 
         } 
        ] 
    } 

我也試過，但我不能夠做出預期的JSON格式，這樣

{ 
    "rentProperty": { 
    "furnitureType": [ 
     "Ward robe", 
     "Lights", 
     "Fan" 
    ] 
    } 


    } 

Answer 1

這裏是您所需輸出的修改代碼：

function rentfunction(){ 
    var arr1 = []; 
    var data={ 
      "rentProperty": { 
          "fullName" : "Some Name" 
          }, 
      "floorType":[] 
     }; 
       $.each($("input[name='furniture_check']:checked"),function(){ 
       var furniture = $(this).val(); 
       arr1.push({"floorTypeName": furniture }); 
       }); 

      data.floorType=arr1; 
      //or data["floorType"]=arr1; 

       console.log(data); 
      } 

Answer 2

這裏我得到的結果是，你怎麼能得到您想要的輸出：

$('#rentBtnSubmit').click(function() { 
 
    var data = { 
 
     rentProperty: { 
 
      name: "some name" 
 
     }, 
 
     floorType: $.map($("input[name=furniture_check]:checked"), function(chkbox){ 
 
      return { floorTypeName: $(chkbox).val() }; 
 
     }) 
 
    }; 
 
    console.log(data); 
 
    return false; // if you need to cancel submission. 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="checkbox" name="furniture_check" value="Ward robe">Ward robe <br> 
 
    <input type="checkbox" name="furniture_check" value="Lights">Lights <br> 
 
    <input type="checkbox" name="furniture_check" value="Fan">Fan <br> 
 
    <input type="checkbox" name="furniture_check" value="Fridge">Fridge <br><br><br> 
 
    
 
    <button type="button" id="rentBtnSubmit">Submit</button> 
 
</form>