如何使用formfields中的复选框制作json数组和对象

时间:2017-10-10 12:16:00

标签: javascript jquery json

这里我有一个表单和一个表单字段,即复选框,在检查了我想要制作JSON格式的三个字段后,但我无法做到这一点,如果有人知道请更新我的答案。

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

			 var data =   {
				"rentProperty" :{
					"furnitureType" :arr1,
				}
			}
			console.log(data);
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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" onclick="rentfunction()">Submit</button>
</form>

  

预期答案

假设我点击Ward robe&amp;灯光与灯光冰箱,我点击提交按钮意味着我想让json像这样

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

我也尝试了,但我无法制作预期的JSON格式,我得到的结果是这样的

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


  }

2 个答案:

答案 0 :(得分:0)

以下是获得所需输出的方法:

&#13;
&#13;
$('#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.
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这是您所需输出的修改代码:

    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);
          }