how to change a bootstrap switch from ON state to OFF state using javascript

Question

how to change a bootstrap switch from OFF state to ON state using javascript.

the switch html code is below,

<input type="checkbox" class="alert-status" name="ab1" id="ab1" data-size="normal" data-on-text="OFF" data-off-text="ON" checked data-bootstrap-switch data-off-color="success" data-on-color="danger">

script code,

$('.alert-status').bootstrapSwitch('state', false);

i tried some steps way but did not get it

Piemol · Answer 1 · 2023-01-27T08:35:17.557

0

Well, it's just 'a checkbox', so have you tried (to turn it ON): $('#ab1').prop('checked', true); Use false to turn it off.

Edit: Yes this works. Go to the Bootstrap docs: https://getbootstrap.com/docs/5.1/forms/checks-radios/#switches And write in the console of your browser: document.getElementById('flexSwitchCheckDefault').checked = true; And notice the "Default switch checkbox input" is turned on.

edited Jan 27 '23 at 08:35

answered Jan 27 '23 at 08:27

Piemol

857
8
17

Szilard Mihocsa · Answer 2 · 2023-01-27T08:44:15.003

You need to get the checkbox by id and then set the checked property to true or false:

document.getElementById('ab1').checked = true; - for ON state

document.getElementById('ab1').checked = false; - for OFF state

For the sake of good practice let's just wrap them into functions:

function setToOn(){
  document.getElementById('ab1').checked = true;
}

function setToOff(){
  document.getElementById('ab1').checked = false;
}

score 0 · Answer 3 · answered Jan 27 '23 at 08:49

$('.switch').bootstrapSwitch('state');
$('.switch').on('switchChange.bootstrapSwitch', function() {
  var check = $('.bootstrap-switch-on');
  switch (check.length) {
    case 0:
      console.log('OFF', check.length)
      break;
    case 1:
      console.log('ON', check.length)
      break;
    default:
      // code block
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<input type="checkbox" class="switch" data-on-color="primary" data-off-color="primary" value="true">

how to change a bootstrap switch from ON state to OFF state using javascript

3 Answers3