เดิมทีฉันสร้างเว็บแอปใน HTML, CSS และ JavaScript จากนั้นก็ขอให้สร้างอีกครั้งใน Bootstrap ด้วย ฉันทำได้ดีทั้งหมด แต่ฉันมีปุ่มสลับในเว็บแอปที่เปลี่ยนกลับเป็นปุ่มวิทยุ (ช่องทำเครื่องหมายเดิม) แทนปุ่มสลับที่ฉันมีในตอนแรก

รหัสสำหรับปุ่มคือ:

<label>
  Notifications
  <span class='toggle'>
    <input type='radio'
      class='notifications'
      name='notifications'
      id='notifications' />
  </span>
</li>
<label>
  Preview
  <span class='toggle'>
    <input type='radio'
      class='preview'
      name='preview'
      id='preview' />
  </span>
</li>

และไฟล์ JavaScript และ CSS ที่เพจ HTML เชื่อมโยง ได้แก่ :

<script src = 'jqtouch.js'></script>
<script src="jquery.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

มีวิธีเปลี่ยนรหัสเพื่อให้ปุ่มสลับกลับมาหรือไม่?

คำตอบเริ่มต้นจากปี 2013

ที่ยอดเยี่ยม (ไม่เป็นทางการ) Bootstrap สวิทช์สามารถใช้ได้

<input type="checkbox" name="my-checkbox" checked>
$("[name='my-checkbox']").bootstrapSwitch();

ใช้ประเภทวิทยุหรือช่องทำเครื่องหมายเป็นสวิตช์ typeแอตทริบิวต์ได้รับการเพิ่มตั้งแต่ V.1.8

รหัสที่มาที่มีอยู่บน Github

หมายเหตุจากปี 2018

ฉันไม่แนะนำให้ใช้ปุ่ม Switch แบบเก่าในตอนนี้เนื่องจากดูเหมือนว่าจะประสบปัญหาการใช้งานอยู่เสมอตามที่หลาย ๆ คนชี้ไว้

โปรดพิจารณาดูสวิตช์ที่ทันสมัยเช่นนี้จากกรอบ React Component (ไม่เกี่ยวข้องกับ Bootstrap แต่สามารถรวมเข้ากับ Bootstrap grid และ UI ได้)

มีการใช้งานอื่น ๆ สำหรับ Angular, View หรือ jQuery

import '../assets/index.less'
import React from 'react'
import ReactDOM from 'react-dom'
import Switch from 'rc-switch'

class Switcher extends React.Component {
  state = {
    disabled: false,
  }

  toggle = () => {
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {
    return (
      <div style={{ margin: 20 }}>
        <Switch
          disabled={this.state.disabled}
          checkedChildren={'开'}
          unCheckedChildren={'关'}
        />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Switcher />, document.getElementById('__react-content'))

สวิตช์ Bootstrap ดั้งเดิม

ดูohkts11 ของคำตอบด้านล่างเกี่ยวกับพื้นเมือง Bootstrap สวิทช์

หากคุณไม่คิดจะเปลี่ยน HTML ของคุณคุณสามารถใช้data-toggleแอตทริบิวต์บน<button>s ดูส่วนการสลับเดี่ยวของตัวอย่างปุ่ม :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

Bootstrap 3 มีตัวเลือกในการสร้างปุ่มสลับตามช่องทำเครื่องหมายหรือปุ่มตัวเลือก: http://getbootstrap.com/javascript/#buttons

ช่องทำเครื่องหมาย

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

ปุ่มตัวเลือก

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

เพื่อให้ใช้งานได้คุณต้องเริ่มต้น.btns ด้วย Javascript ของ Bootstrap:

$('.btn').button();

ฉันพยายามเปิดใช้งานคลาส 'active' ด้วยตนเองด้วยจาวาสคริปต์ มันไม่สามารถใช้งานได้เหมือนกับไลบรารีที่สมบูรณ์ แต่สำหรับกรณีง่ายๆดูเหมือนจะเพียงพอ:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

หากคุณคิดอย่างรอบคอบแล้ว bootstrap จะใช้คลาส 'active' เมื่อกดปุ่มไม่ใช่ก่อนหรือหลัง (กรณีของเรา) ดังนั้นจึงไม่มีข้อขัดแย้งในการนำคลาสเดียวกันมาใช้ซ้ำ

ลองใช้ตัวอย่างนี้และบอกฉันว่าล้มเหลว: http://jsbin.com/oYoSALI/1/edit?html,js,output

หากคุณต้องการเก็บฐานรหัสขนาดเล็กและคุณจะต้องใช้ปุ่มสลับสำหรับส่วนเล็ก ๆ ของแอปพลิเคชันเท่านั้น ฉันขอแนะนำให้รักษารหัสจาวาสคริปต์ของคุณแทน (angularjs, javascript, jquery) และใช้ CSS ธรรมดา

ตัวสร้างปุ่มสลับที่ดี: https://proto.io/freebies/onoff/

นี่นี้มีประโยชน์มากสำหรับเงินทุนปุ่มสลับ ตัวอย่างในส่วนโค้ด !! และ jsfiddle ด้านล่าง

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

อัปเดต 2020 สำหรับ Bootstrap 4

ฉันแนะนำbootstrap4-toggleในปี 2020

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

<input id="toggle-trigger" type="checkbox" checked data-toggle="toggle" data-onstyle="success">
<button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>

<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

คุณสามารถใช้ไลบรารี CSS Toggle Switch เพียงใส่ CSS และตั้งโปรแกรม JS ด้วยตัวคุณเอง: http://ghinda.net/css-toggle-switch/bootstrap.html

คุณสามารถใช้ Material Design Switch สำหรับ Bootstrap 3.3.0

http://bootsnipp.com/snippets/featured/material-design-switch

โซลูชัน Bootstrap 4

bootstrap 4 เรือในตัวสลับ นี่คือเอกสาร https://getbootstrap.com/docs/4.3/components/forms/#switches

ในกรณีที่ใครบางคนยังคงมองหาปุ่มสวิทช์ / สลับที่ดีฉันทำตามคำแนะนำของ Rick และสร้างคำสั่งเชิงมุมง่ายๆรอบ ๆสวิตช์เชิงมุมเชิงมุมสวิทช์นอกเหนือจากการเลือกใช้สวิตช์สไตล์ Windows แล้วการดาวน์โหลดทั้งหมดยังมีขนาดเล็กกว่ามาก (2kb เทียบกับ 23kb minified css + js) เมื่อเทียบกับ angular-bootstrap-switch และ bootstrap-switch ที่กล่าวถึงข้างต้นด้วยกัน

คุณจะใช้มันดังนี้ ขั้นแรกให้รวมไฟล์ js และ css ที่ต้องการ:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

และเปิดใช้งานในแอปเชิงมุมของคุณ:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

ตอนนี้คุณพร้อมใช้งานแล้วดังนี้:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>