将动态创建的复选框输入转换为切换式开关。

Posted 2023-02-24

我需要动态地创建一个 开关机 开关。

我正在创建这样的非动态开关。

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12">Admin User</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input type="checkbox" class="js-switch" id= "canModify"/>
   </div>
</div> 

这样就很好用了

然而，当我通过javascript创建同样的结构时，比如这样。

  html = '<input type="checkbox" class="js-switch" id= "' + elementID +  '"/>'

我得到的结果是这样的

下面这个是静态添加的，显示正确。上面那个是动态生成的，但它只显示为一个复选框。所以我的问题是，如何解决这个问题？

答案

只需在DOM中添加一个新的输入，用 class="js-switch" 不会产生 开关机-式开关。

必须为每个输入创建一个JavaScript Switchery对象。

这个函数将把DOM中所有非开关式输入转换为开关式输入。

// convert all inputs with class="js-switch" to Switchery
function convertToSwitchery() 

  // get all "js-switch" class inputs in the DOM
  const jsSwitchInputs = document.querySelectorAll('.js-switch');

  jsSwitchInputs.forEach(input => 
    // ignore if input is already switchery
    if (input.dataset.switchery) 
      return;
    
    // create new Switchery object
    new Switchery(input);
  );

一个工作示例:

// convert all inputs with class="js-switch" to Switchery-style
function convertToSwitchery() 
  const jsSwitchInputs = document.querySelectorAll('.js-switch');
  jsSwitchInputs.forEach(input => 
    // ignore if input is already switchery
    if (input.dataset.switchery) 
      return;
    
    new Switchery(input);
  );




// code for demo only:
const divResult = document.getElementById('result');
let iButton = 0;

// add a new "js-switch" input
function addInput() 
  const br = document.createElement('br');
  divResult.appendChild(br);
  const label = document.createElement('label');
  label.for = `input$++iButton`;
  label.className = 'mr-4';
  label.innerHTML = `Dynamic "js-switch" $iButton `;
  divResult.appendChild(label);
  const input = document.createElement('input');
  input.type = 'checkbox';
  input.className = 'js-switch';
  input.id = `input$iButton`;
  divResult.appendChild(input);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/switchery-latest@0.8.2/switchery.css" rel="stylesheet" />

<div class="p-4">
  <h4>Convert Checkbox Inputs to Switchery Style</h4>
  <button class="btn btn-primary btn-sm" onclick="addInput();">
    Add ".js-switch"</button>
  <button class="btn btn-primary btn-sm"
    onclick="convertToSwitchery();">
    Convert All to Switchery</button>
    
  <div class="mt-4" id="result">
    <label for="static-input">Static "js-switch"</label>
    <input type="checkbox" class="js-switch" checked />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/switchery-latest@0.8.2/dist/switchery.min.js"></script>

另一答案

在看了文档之后，我确实找到了一些工作。

我需要先将代码添加到包含开关的实际精灵中。

   document.getElementById("mainPanel").innerHTML = html;

只有在添加了代码之后，我才能使用这两行代码来启用开关，这两行代码是从文档中复制和粘贴过来的

   // This is required to enable Switchery. 
   var elem = document.querySelector('.js-switch');
   var init = new Switchery(elem);   

希望对别人有所帮助!

以上是关于将动态创建的复选框输入转换为切换式开关。的主要内容，如果未能解决你的问题，请参考以下文章

Rails 6：从表单输入动态创建/切换/迁移数据库

使用动态创建的复选框和数组维护复选框值

单击复选框，动态更改表格中的文本

如何为动态字段Angular 4创建表单生成器？

低功耗设计

OpenLayers 将动态复选框创建绑定到 GeoServer LayerGroup