Question

我的html页面中有以下代码，问题是id为'alot'的div元素的multiselect复选框

<div id="pagePreferences" class="pageDefault pageAlertsPreferences" data-role="page" data-class="com/xyz/abc/Controller">

  <div id="header" data-role="header">
    <!-- Loads header here -->
  </div>

  <div class="contentRegular" data-role="content">

    <div data-role="main" class="ui-content" data-theme="c">

      <label class="inline">Yes or NO</label>
      <select id="togButton" class="slider" name="flip-1" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
      </select>


      <div data-role="fieldcontain" id="alot">
        <fieldset data-role="controlgroup">

          <div style="font-weight: bold" id="checkBoxes">Business Category:</div>

          <input type="checkbox" value="All" class="checkBoxClass" id="ckbCheckAll" />
          <label for="ckbCheckAll">All</label>

          <input type="checkbox" value="29" class="checkBoxClass" id="29" />
          <label for="29">ABC</label>

          <input type="checkbox" value="30" class="checkBoxClass" id="30" />
          <label for="30">BCD</label>

          <input type="checkbox" value="31" class="checkBoxClass" id="31" />
          <label for="31">CDE</label>


        </fieldset>
      </div>


    </div>

  </div>

  <div id="navMenu" data-role="panel" data-animate="false">
    <!-- Navigation Menu is loaded here -->
  </div>

</div>

首先，我对像lables（ABC，BCD，CDE）这样的值进行了硬编码。这工作正常，我得到如下的输出。

enter image description here

但是当我想从javascript文件（com / xyz / abc / Controller）生成muliselect cheboxes内容时，我没有以正确的格式获得多选复选框

这是屏幕截图

enter image description here

这是html：

        <div data-role="fieldcontain" id="alot">

        </div> -->

Javascript文件：

var prefix = '<fieldset data-role="controlgroup">' +
  '<div style="font-weight: bold" id="checkBoxes">Business Units:</div>' +
  '<input type="checkbox" value="All" class="checkBoxClass" id="ckbCheckAll" />' +
  '<label for="ckbCheckAll">All</label>';

var subfix = '</fieldset>';

var html = "";


$('#alot').append(prefix);

for (generate the data from db) {

  html = '<input type="checkbox" value="' + unitID + '" class="checkBoxClass" id="' + unitID + '"' + '/>';
  html = html + '<label for="' + unitID + '"' + '>' + unitName + '</label>';

  $('#alot').append(html);

}


$('#alot').append(subfix);

这里可能缺少什么？为什么外观＆amp;当我动态生成内容时，多选复选框的感觉不一样了吗？

Answer 1

对于动态添加的元素，您应该使用jQM方法手动增强它们。最简单的方法是使用父div上调用的.enhanceWithin()。这个方法将在该div中创建任何小部件，尽管它的＆＃39;类型。

/* create controlgroup and append "All" checkbox to it */
var ctrlgrp = $("<div/>", {
    "data-role": "controlgroup",
    id: "checkBoxes"
}).append('<input type="checkbox" value="All" class="checkBoxClass" id="ckbCheckAll" /><label for="ckbCheckAll">All</label>');

/* loop through your data array and append checkboxes to ctrlgrp */
for (var i = 0; i <= 5; i++) {
    ctrlgrp.append('<input type="checkbox" value="value' + i + '" class="checkBoxClass" id="cb' + i + '"' + '/><label for="cb' + i + '"' + '>Checkbox ' + i + '</label>');
}

/* append all elements to "alot" div and then enhance the elements */
$("#alot")
    .append(ctrlgrp)
    .enhanceWithin();

/* check/uncheck checkboxes
   with change event delegated to it
   since it's dynamically added */
$("#alot").on("change", "#ckbCheckAll", function () {
    $(this)
        .closest(".ui-controlgroup")
        .find("[type=checkbox]")
        .prop("checked", $(this).prop("checked"))
        .checkboxradio("refresh");
});

<强> Demo

多选chebox中的fieldset格式问题

1 个答案: