Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap switch button event

I'm using bootstrap switch button. I want to change input value when on text or off text is changed. How can I check if on-text="Android" I want to print android to inp1 text or if off-text="IOS" I want to print ios to inp1 text. İs there another way to check text? You can check online demo http://jsfiddle.net/PNU45/156/

HTML

  <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#">

JavaScript

$('.alert-status').bootstrapSwitch('state', true);
$('#btn1').on('switchChange.bootstrapSwitch', function (event, state) {
    var x=$(this).data('on-text');
    var y=$(this).data('off-text');
    if(x=="Android"){
        $("#inp1").val("Android");
    }
    if(y=="IOS"){
        $("#inp1").val("IOS");
    }
});
$('#btn2').on('switchChange.bootstrapSwitch', function (event, state) {
    var x=$(this).data('on-text');
    var y=$(this).data('off-text');
    if(x=="Java"){
        $("#inp2").val("Java");
    }
    if(y=="IOS"){
        $("#inp2").val("IOS");
    }
});
like image 705
Mike Henley Avatar asked Jun 26 '16 20:06

Mike Henley


People also ask

Is there a bootstrap toggle for switch buttons?

Made for Bootstrap 4! This page and all of the switch buttons shown are running on Bootstrap 4.3 Bootstrap toggle is available in different sizes. Bootstrap toggle can handle custom sizes by data-width and data-height options.

How do I pass options in bootstrap button options?

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled". Text of the on toggle label. Text of the off toggle label. Style of the on toggle. Refer to Bootstrap Button Options documentation for more information.

What is Bootstrap switch used for?

It's mostly used in a number of various forms since they are very simple to use and cut the time one needs to fill all the inputs. Examples of Bootstrap switch use:

How do I toggle a checkbox in Bootstrap?

Simply add data-toggle="toggle" to convert checkboxes into toggles. Simply add data-toggle="toggle" to a convert checkboxes into toggles. Simply add data-toggle="toggle" to convert checkboxes into toggles. Simply call the bootstrapToggle method to convert checkboxes into toggles. See Options for additional colors, etc.


1 Answers

You can check if input is checked:

$('#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

like image 118
max Avatar answered Oct 07 '22 00:10

max