javascript - 我如何为标签和值标签: value创建键值对

Question

我想用 label 制作表格和value对，假设我有这样的东西 <label>i can </label>和value像这样<input type="text" value="why not" /> 我想要的结果
{"i can" : " why not "}

这是我的示例元素和代码片段

var result = [];

$('div label').each(function(){
    var $this = $(this);
   var label = $this.text();
   //console.log(label);
   
   value = $this.siblings().attr('value');
   //console.log(value);
  
    result.push({label:label,value:value});
});


console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">

<div class="form-group">
        <label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :  </label> 

        <input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
</div>

<div class="form-group">

      <label for="textarea" class="fb-textarea-label" >Comments :  </label>

      <textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
          very bad service
      </textarea>

</div>


<div class="form-group">

<label for="select" class="fb-select-label">Select Your Locality:  </label>

    <select type="select" class="form-control" name="locality" id="locality">
              <option value="vrpura">V.R Pura</option><option selected="true" value="bel">B.E.L</option>
              <option value="jala">Jalahalli</option>

      </select> 
  </div>
  
  
 <div class="fb-checkbox form-group field-checkbox-1483332316174-preview">

        <input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview"> 

        <label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:  </label>
  
 </div>
  
  
  <div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
  
  
  <label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :  </label>
  
  
 <div class="checkbox-group">
                      <input value="jamoon" type="checkbox" class="checkbox-group" name=""                                         id="checkbox-group-1483332396337-preview-0" checked="">
                      <label for="checkbox-group-1483332396337-preview-0">Jamoon</label><br>
                      
                      <input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]"                                   id="checkbox-group-1483332396337-preview-1" selected=""> 
                      <label for="checkbox-group-1483332396337-preview-1">samosa</label><br>
                      
                      
                      <input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]"                                id="checkbox-group-1483332396337-preview-2" selected=""> 
                      <label for="checkbox-group-1483332396337-preview-2">beedi</label><br>
  
  
  </div>
  </div>
</form>

请注意check group我想要所有checked value与单label及其所有相关checked values .

以及 select我想要单例selected value怎样才能做到呢？

请帮助我提前致谢!!!

Answer 1

但是根据OP声明，您需要创建一个对象然后设置它的属性

var obj = {};
obj[label] = value;
result.push(obj);

var result = [];

$('div label').each(function() {
  var $this = $(this);
  var label = $this.text();
  value = $this.siblings().attr('value');

  var obj = {};
  obj[label] = value;
  result.push(obj);
});


console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">

  <div class="form-group">
    <label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>

    <input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
  </div>

  <div class="form-group">

    <label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>

    <textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
      very bad service
    </textarea>

  </div>


  <div class="form-group">

    <label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>

    <select type="select" class="form-control" name="locality" id="locality">
      <option value="vrpura">V.R Pura</option>
      <option selected="true" value="bel">B.E.L</option>
      <option value="jala">Jalahalli</option>

    </select>
  </div>


  <div class="fb-checkbox form-group field-checkbox-1483332316174-preview">

    <input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">

    <label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>

  </div>


  <div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">


    <label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>


    <div class="checkbox-group">
      <input value="jamoon" type="checkbox" class="checkbox-group" name="" id="checkbox-group-1483332396337-preview-0" checked="">
      <label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
      <br>

      <input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" selected="">
      <label for="checkbox-group-1483332396337-preview-1">samosa</label>
      <br>


      <input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" selected="">
      <label for="checkbox-group-1483332396337-preview-2">beedi</label>
      <br>


    </div>
  </div>
</form>

<小时/>

我建议您使用.serializeArray()

Encode a set of form elements as an array of names and values.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form action="uploaddata.php" method="POST">
  <div class="form-group">
    <label for="text-1483332101835-preview" class="fb-text-label">Mobile Number :</label>
    <input type="text" class="form-control" name="mobNum" value="963242726" id="mobNum">
  </div>
  <div class="form-group">
    <label for="textarea-1483332158183-preview" class="fb-textarea-label">Comments :</label>
    <textarea type="textarea" class="form-control" name="comments" maxlength="11" id="comments">
      very bad service
    </textarea>
  </div>
  <div class="form-group">
    <label for="select-1483332201030-preview" class="fb-select-label">Select Your Locality:</label>
    <select type="select" class="form-control" name="locality" id="locality">
      <option value="vrpura">V.R Pura</option>
      <option selected="true" value="bel">B.E.L</option>
      <option value="jala">Jalahalli</option>
    </select>
  </div>
  <div class="fb-checkbox form-group field-checkbox-1483332316174-preview">
    <input type="checkbox" class="checkbox" name="checkbox-1483332316174-preview" id="checkbox-1483332316174-preview">
    <label for="checkbox-1483332316174-preview" class="fb-checkbox-label">Home Delivery:</label>
  </div>
  <div class="fb-checkbox form-group field-checkbox-group-1483332396337-preview">
    <label for="checkbox-group-1483332396337-preview" class="fb-checkbox-group-label">Select Your Item :</label>
    <div class="checkbox-group">
      <input value="jamoon" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-0" checked="">
      <label for="checkbox-group-1483332396337-preview-0">Jamoon</label>
      <br>
      <input value="samosa" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-1" checked="">
      <label for="checkbox-group-1483332396337-preview-1">samosa</label>
      <br>
      <input value="beedi" type="checkbox" class="checkbox-group" name="checkbox-group-1483332396337-preview[]" id="checkbox-group-1483332396337-preview-2" checked="">
      <label for="checkbox-group-1483332396337-preview-2">beedi</label>
      <br>
    </div>
  </div>
</form>