如何为标签和值标签创建键值对：值

时间：2017-01-02 05:38:30

标签： javascript jquery node.js

我想用label和value对制作表格，假设我有类似<label>i can </label>和value这样的内容<input type="text" value="why not" /> 我的期望的结果
  {"i can" : " why not "}

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

＆＃13;
＆＃13; 
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);
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

{p> 请注意 check group我想要所有checked value一个label及其所有关联的checked values。

和select我想要单selected value怎么做？

请提前帮助我！

2 个答案:

答案 0 :(得分：1)

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

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>
console.log($("form").serializeArray());

我建议您使用.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>
- (IBAction)AClick:(UIButton *)sender {
      sender.selected = !sender.selected;
 }

答案 1 :(得分：1)

你可以循环标签并按照你的方式输入，或者如Satpal所说，你也可以使用地图和serializeArray 现在，如果您不使用serializeArray，那么您必须检查输入标签的类型，然后才能获得所选的文本或值

例如：

如果下一个是<div class="panel-wrapper collapse in"> <div class="panel-body"> <a class="btn btn-success btn-outline m-t-10 collapseble" style="margin:1px" ng-repeat="author in authorsData" ng-click="showRoles(author.id, author.contribution_role)">{{author.name}}</a> </div> <div class="m-t-15" ng-show="roles.length > 0"> <button class="btn btn-outline btn-info btn-xs waves-effect" style="margin:1px" ng-repeat="role in roles">{{role}}</button> </div> </div> ，那么必须进行以下检查才能获得价值， 

checkbox

您可以通过this了解更多信息。最好选择serializeArray

相关问题
最新问题