將表單的複選框值傳遞爲JSON？

Question

HTML代碼：

<form class="form-horizontal" id="addpersons" style="padding:20px;"> 
<fieldset class="scheduler-border"> 

<!-- Form Name --> 
<legend class="scheduler-border">Information</legend> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="fname">First Name</label> 
    <div class="col-md-5"> 
    <input id="fname" name="firstName" type="text" placeholder="First Name" class="form-control input-md"> 

    </div> 
</div> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="lname">Last Name</label> 
    <div class="col-md-5"> 
    <input id="lname" name="lastName" type="text" placeholder="Last Name" class="form-control input-md"> 

    </div> 
</div> 

<!-- Multiple Checkboxes (inline) --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="professionalservices">Do you offer any of the services?</label> 
    <div class="col-md-4" style="width:70%; margin-left:34%;"> 
    <label class="checkbox-inline" for="professionalservices-0"> 
     <input type="checkbox" name="professionalservices" id="professionalservices-0" value="1"> 
     BI services 
    </label> 
    <label class="checkbox-inline" for="professionalservices-1"> 
     <input type="checkbox" name="professionalservices" id="professionalservices-1" value="2"> 
     Resell vendor's services 
    </label> 
    <label class="checkbox-inline" for="professionalservices-2"> 
     <input type="checkbox" name="professionalservices" id="professionalservices-2" value="3"> 
     Consulting Services 
    </label> 
    <label class="checkbox-inline" for="professionalservices-3"> 
     <input type="checkbox" name="professionalservices" id="professionalservices-3" value="4"> 
     Other servies 
    </label> 
    <label class="checkbox-inline" for="professionalservices-4"> 
     <input type="checkbox" name="professionalservices" id="professionalservices-4" value="5"> 
     No services 
    </label> 
    </div> 
</div> 
</fieldset> 

<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for=""></label> 
    <div class="col-md-4"> 
     <a href="javascript:addperson();" class="btn btn-success">Apply Now</a> 
    </div> 
</div> 

</form> 

的Json代碼：

<script type="text/javascript"> 

    function addperson(){ 

     alert("hello"); 
     var persons = JSON.stringify({ 
     "firstName": $('#fname').val(), 
     "lastName":$('#lname').val(), 
     "Services":$('#services').val() 


     }); 

    alert("test values are"+persons); 
    console.log(persons); 

     $.ajax({ 
      type: "POST", 
      contentType: 'application/json', 
      url: baseurl+"addperson/add", 
      data: persons, 
      dataType:"text", 
      success:successmethod, 
      error: function(data,status) { 
      alert("Error "+status); 
      } 
      }); 

    } 
    function successmethod(data){ 
    alert("sucessfully stored values"); 
    } 
    </script> 

在上面的代碼是能夠利用每個文本框的值，但是當涉及到複選框，我想裏面retrive多個複選框值json，並希望將它傳遞給Ajax.Can任何人都可以告訴我如何將多個複選框值輸入到Json中？任何幫助都將被讚賞..

Answer 1

嘗試類似以下操作以獲取檢查值：

$("#services:checked").map(function() { 
    return $(this).val(); 
}).get() 

在你的情況，這將是這樣的：

var persons = JSON.stringify({ 
    "firstName": $('#fname').val(), 
    "lastName":$('#lname').val(), 
    "Services": $("#services:checked").map(function() { 
        return $(this).val(); 
       }).get() 
    }); 

Answer 2

爲什麼不乾脆把整個形式使用jQuery serializeArray()：

data: $('form#addpersons').serializeArray(); 

會得到你想要什麼，並大大縮短碼。

其Javascript代碼的方式不是JSON代碼。 ;）

嘗試：

function addperson(){ 

     var persons = $('form#addpersons').serializeArray(); 
     console.log(persons); 

     }); 

Answer 3

將其標記爲答案，如果它可以幫助你。 更改功能addPerson的（）

function addperson(){ 
    var objJson={}; 
    objJson["firstName"]=$('#fname').val(); 
    objJson["lastName"]=$('#lname').val(); 
    objJson["Services"]={}; 
    $.each($('input[type=checkbox]'), function(i, left) { 
     objJson["Services"][$(this).parent().text().trim()]=$(this).prop("checked"); 
    }); 
    var persons = JSON.stringify(objJson); 
    alert("test values are"+persons); 
    console.log(persons); 
    $.ajax({ 
     type: "POST", 
     contentType: 'application/json', 
     url: baseurl+"addperson/add", 
     data: persons, 
     dataType:"text", 
     success:successmethod, 
     error: function(data,status) { 
     alert("Error "+status); 
     } 
    }); 

}