javascript - 为 div 中的所有复选框添加值、文本和状态到数组

Question

我想获取复选框的值、文本和状态并将其添加到数组中，以便转换为 json。

生成的 html 如下所示。

<div id="utilityMultiSelect" class="col-lg-3">
    <div class="widgetMultiSelect form-control multiselect-checkbox" style="height: auto; border: solid 1px #c0c0c0; display: inline-table; width: 100%;">
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-127">Heat and steam</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-26">Diesel</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-19">Gas</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-16">Water</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-10">Energy</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-1">Electricity</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="1">Natural Gas</label>
        <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="8">_Costs</label>
    </div>
</div>

到目前为止我已经得到了以下内容..

$("#searchForm").on('submit', function () {
        //get checkboxes for div and map to array with value, text and state
        var selectedUtilities = $('#utilityMultiSelect input:checkbox')
            .map(function () {
                return
                //$(this).val()
                //$(this).is(':checked');
            }).get();

我可以返回值或状态，如何将其转换为类似于具有值、文本和选定项的 selectlistitem？有没有一种好的方法可以使用 jQuery 或使用 underscorejs 来实现这一点？

Answer 1

创建一个从map返回的对象:

return {
    value:   this.value,
    text:    $(this).closest("label").text(),
    checked: this.checked
};

实例:

$("#btn-show").on('click', function() {
  var selectedUtilities = $('#utilityMultiSelect input:checkbox')
    .map(function() {
      return {
          value:   this.value,
          text:    $(this).closest("label").text(),
          checked: this.checked
      };
    }).get();
  console.log(selectedUtilities);
});

<div id="utilityMultiSelect" class="col-lg-3">
  <div class="widgetMultiSelect form-control multiselect-checkbox" style="height: auto; border: solid 1px #c0c0c0; display: inline-table; width: 100%;">
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-127">Heat and steam</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-26">Diesel</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-19">Gas</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-16">Water</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-10">Energy</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="-1">Electricity</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="1">Natural Gas</label>
    <label style="display: block; !important;" class="multiselect-checkbox-on"><input checked="checked" class="multiSelectCheckBox" name="" type="checkbox" value="8">_Costs</label>
  </div>
</div>
<input type="button" id="btn-show" value="Click To Show Selected">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<小时/>

请注意，我使用了 this.value 而不是 $(this).val() 和 this.checked 而不是 $(this).is(":checked")。虽然这些 jQuery 主义有效，但它们在这里完全没有必要。 HTMLInputElement 具有 value 和 checked 属性。