Bootstrap 切换如何在点击事件上读取数据并打印答案

【问题标题】：Bootstrap switch how to read data on click event and print itBootstrap 切换如何在点击事件上读取数据并打印
【发布时间】：2014-06-06 09:41:50
【问题描述】：

我已经按照给定的方式实现了 BootStrap Switch：

<?php while ($arr = mysql_fetch_array($res)) { ?>
    <td class="center">
             <?php if ($arr['status'] == 1) { ?>
                   <input class="switch"  type="checkbox" data-on-label="YES" data-off-label="NO"  name="my-checkbox"  checked>
             <?php } else { ?>
                    <input class="switch" type="checkbox" data-on-label="SI" data-off-label="NO" name="my-checkbox">   
             <?php } ?>
    </td>

并使用以下脚本捕获开关事件

$(document).ready(function () {
     $('.switch').on('switchChange.bootstrapSwitch',function (event, state) {
          console.log(state);
     });
 });

在此我能够获取状态，但我也希望获取数据（将是 post id），因为我想发送 Ajax 调用

或者是否有任何其他方式可以在切换点击时使用 ajax 更新数据库值

【问题讨论】：

您实际上想将什么作为数据发送到 ajax 调用？？
发布或取消发布的帖子 ID

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

这里是获取复选框的状态、文本和数据的解决方案。

$(function() {
  var switchSelector = 'input[type="checkbox"].bs-switch';
  
  // Convert all checkboxes with className `bs-switch` to switches. 
  $(switchSelector).bootstrapSwitch();

  // Attach `switchChange` event to all switches.
  $(switchSelector).on('switchChange.bootstrapSwitch', function(event, state) {
    console.log(this);  // DOM element
    console.log(event); // jQuery event
    console.log(state); // true | false

    // Get the information for the switch.
    var info = {
      state : state,
      value : $(this).data(state ? 'onText' : 'offText'),
      data : $(this).attr('data')
    }
    
    // Show bootstrap info alert.
    if ($('div.alert').length === 0) {
      $('body').append($('<div>').addClass('alert alert-info'));
    }
    $('div.alert').text(JSON.stringify(info, undefined, '  '));
  });
});

body {
  padding: 20px;
}

.alert.alert-info {
  margin-top: 1em;
  white-space: pre;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.1.0/css/bootstrap2/bootstrap-switch.min.css" rel="stylesheet" />

<div id="switchList">
  <input class="switch bs-switch" type="checkbox" data="1" checked
         data-on-text="Yes" data-off-text="No" />
  <input class="switch bs-switch" type="checkbox" data="2"
         data-on-text="Pass" data-off-text="Fail"
         data-on-color="success" data-off-color="danger" />
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.1.0/js/bootstrap-switch.min.js"></script>

【讨论】：

【解决方案2】：

如果您已将数据附加到元素，则可以执行此操作。

 $(document).ready(function () {
         $('.switch').on('switchChange.bootstrapSwitch',function (event, state) {                  
              console.log($(event.element).attr("data"));
         });
     });

【讨论】：

@user3714503 Here 是你的 jsfiddle 链接。如果你想要别的东西，请检查并告诉我。

【解决方案3】：

它将更新复选框的值。它在引导开关中显示问题。此代码将解决您的问题。

 <input type="checkbox" tabindex="6" name="autopopup" value="0"
  data-bootstrap-switch data-off-color="danger"  id="autopopup" data-on-color="success">
  $('#multiselect').on('switchChange.bootstrapSwitch',function (event, state) {        
    var checkBox = document.getElementById("multiselect");

  // If the checkbox is checked, display the output text
          if (checkBox.checked == true){
            document.getElementById("multiselect").value = "1";
          } else {
            document.getElementById("multiselect").value = "0";
          }           

         });

【讨论】：