将值动态绑定到jquery中的切换按钮

Binding values dynamically to a toggle button in jquery

本文关键字：按钮 jquery 动态绑定      更新时间：2023-09-26

我正在创建一个切换按钮，我想将选择事件绑定到该按钮。我已经创建了这个按钮，但我不知道如何将值绑定到它，并使它像选择按钮一样工作。有人能给我一些线索或与之相关的例子吗，这样我就可以尝试并学习一些东西了？

我的要求是，我必须将select事件绑定到它，并使它像选择按钮一样工作。

这就是我创建按钮的方式：

<div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-6">Tax Value</label>
                    <div class="col-sm-6">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></button>
                            </div>
                            <input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-12" id="invoice_request_tax_value_label">Tax Value - Nil</label>
                </div>
            </div>
        </div>

尝试使用knockout.js。这就是我用来做你想要的动作的方法（动态绑定值）

foreach绑定是解决问题的方法。

此外，还可以使用选项绑定，它只能与select标记一起使用。

看看你是否可以使用淘汰赛。

创建您的可观测值，然后将其绑定到每个幻灯片/切换，然后您可以调整此示例，以便在切换时，下拉列表中的选择值变为您的dropdown.selectedText（javascript），您会注意到它们看起来像是注释代码，但实际上是ko 中的条件语句

<tbody data-bind="foreach: yourObservableArray">
    <tr data-bind="attr: { 'id': description }">
    <td style="border-bottom: 1px solid #e0e0e0;">
      <label data-bind="text: description"></label>
     </td>
   <td class="td-actions" style="border-bottom: 1px solid #e0e0e0;">
  <input type="text" class="input-mini" data-bind="value: amount">
 <input type="hidden" class="input-mini" data-bind="attr: { 'id': 'DC_' + description }, value: Totalcost">
  </td>
     <td class="toggle-soft">
    <!-- ko if: description == 'Data' -->
   <div id="slider" class="toggle floatright" onclick="toggleCOS()"></div>
                                                                <input type="checkbox" disabled="disabled" class="checkbx" id="cos_data" style="display: none;">
  </div>
     <!-- /ko -->
      <!-- ko if: description != 'Data' -->
       Cost
       <!-- /ko -->
           </td>
                </tr>
           </tbody>
相关文章：