Bootstrap开关按钮事件

时间:2016-06-26 20:58:46

标签: jquery twitter-bootstrap

我正在使用自举开关按钮。我希望在文本或文本更改时更改输入值。如何检查on-text =“Android”我是否要将android打印到inp1文本,或者如果off-text =“IOS”我想将ios打印到inp1文本。有另一种检查文本的方法吗?您可以查看在线演示http://jsfiddle.net/PNU45/156/

HTML

<div id="main">
    <div class="container">
        <div class="box">
            <form action="/save" method="post">
                <input type="text" placeholder="code" name="name"/>
                <select name="education">
                    <option value="3">option 3</option>
                </select>
                <button type="submit">save</button>
            </form>
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</div>

的JavaScript

  <input type="input" id="inp1" value="">
  <input type="input" id="inp2" value="">
  <input type="checkbox" checked="true" class="alert-status" id="btn1" data-size="normal" name="my-checkbox" data-on-text="Android" data-off-text="IOS">
  <input type="checkbox" checked="true" class="alert-status" id="btn2" data-size="normal" name="my-checkbox" data-on-text="Java" data-off-text="C#">

2 个答案:

答案 0 :(得分:6)

您可以检查是否已选中输入:

$('#switch').on('switchChange.bootstrapSwitch', function (event, state) {
    var x = $(this).data('on-text');
    var y = $(this).data('off-text');
    if($("#switch").is(':checked')) {
      $("#in0p1").val(x);
    } else {
      $("#inp1").val(y);
    }
});

$('#switch2').on('switchChange.bootstrapSwitch', function (event, state) {
    var x = $(this).data('on-text');
    var y = $(this).data('off-text');
    if($("#switch2").is(':checked')) {
      $("#inp2").val(x);
    } else {
      $("#inp2").val(y);
    }
});

JSFIDDLE

答案 1 :(得分:1)

您可以使用$(selector).bootstrapSwitch('state');来获取交换机的状态

$('.alert-status').bootstrapSwitch('state', true);    
$(document).on('switchChange.bootstrapSwitch', '.alert-status', function (event, state) {
    if ($(this).bootstrapSwitch('state')) {     
         console.log($(this).data('on-text'));
    }else {
            console.log($(this).data('off-text'));
    }
});