订购复选框及其标签答案

【问题标题】：Ordering Checkbox and its label订购复选框及其标签
【发布时间】：2017-03-29 10:23:51
【问题描述】：

我正在使用 Oracle CPQ 工具，我正在尝试创建一个复选框作为属性。

在 UI 中，我得到以下信息：

在浏览器源代码（由 CPQ 工具生成）中查看时，我可以看到以下 HTML 代码：

<div class="form-item clearfix null" id="attr_wrapper_1_chkmembershipFeePayment_t" style="display: table;">
<label class="form-label" for="chkmembershipFeePayment_t" style="width: 100px">
    <span style="padding-right: 5px;display: table-cell;">Membership Fee</span>
</label>
<div class="form-element field-wrapper" id="field_wrapper_1_chkmembershipFeePayment_t" style="padding-left:100px">
    <div class="boolean-wrapper field" message="" style="display: table-cell;">
        <div class="boolean-wrapper-inner"><input value="false" class=" form-input  cm-attr-value " name="chkmembershipFeePayment_t" onclick="if (this.checked) { this.value='true'; } else { this.value='false'; }" data-is-boolean="true" type="checkbox">
        </div>
        <input value="true" name="_boolean_present_chkmembershipFeePayment_t" type="hidden">
    </div>
    <div id="msg_1_chkmembershipFeePayment_t" class="error-hover" data-action-message="" message=""></div>
</div>
::after</div>

我的问题是：考虑到我无法使用 CPQ 工具直接编辑 HTML，如何切换复选框和标签，将复选框放置在标签“无会员资格”之前，使用 CSS 或 JavaScript属性。

那么有什么办法吗？

Sagar V 之后更新了 javascript

【问题讨论】：

这个答案对你有用吗？
不，它不工作。即使我在控制台中检查异常但它是空白的。我正在检查我忘记部署的任何东西。
在sn-p中，你看到了什么？工作与否？
任何更新@V.Rohan ？
你能添加更多代码吗？这是css或法线对齐的问题。

标签： javascript jquery html css checkbox

【解决方案1】：

JavaScript

获取标签元素
将其从原始位置移除
在输入后添加

elm = document.querySelector('label[for=chkmembershipFeePayment_t]');

target = document.querySelector("input[type=checkbox]");

elm.parentNode.removeChild(elm);

target.parentNode.insertBefore(elm, target.nextSibling);

<label class="form-label" for="chkmembershipFeePayment_t" style="width: 100px">
<span style="padding-right: 5px">Membership Fee</span>
</label>
<div class="form-element field-wrapper" id="field_wrapper_1_chkmembershipFeePayment_t" style="padding-left:100px">
  <div class="boolean-wrapper field" message="">
    <div class="boolean-wrapper-inner">
      <input value="false" class=" form-input  cm-attr-value " name="chkmembershipFeePayment_t" onclick="if (this.checked) { this.value='true'; } else { this.value='false'; }" data-is-boolean="true" type="checkbox">
    </div>
    <input value="true" name="_boolean_present_chkmembershipFeePayment_t" type="hidden">
  </div>
  <div id="msg_1_chkmembershipFeePayment_t" class="error-hover" data-action-message="" message=""></div>

【讨论】：