从代码中更改Switchery复选框状态

Question

如何以编程方式将jQuery Switchery复选框状态从checked 更改为unchecked(反之亦然)？

我尝试使用global_switch_sound.prop('checked', true)复选框元素,但它不起作用.

HTML:

<input id="sound-active-input" type="checkbox"  />

JavaScript的:

 global_switch_sound = new Switchery(document.querySelector('#sound-active-input'));

Answer 1

试试这个:

$('.switchery').click();

它应该触发一次点击和切换.或这个:

$('.switchery').trigger('click');

Answer 2

如果有人像我一样,想要一个超越".click()"DOM的解决方案.以下函数使用Switchery对象和布尔值来指示是应该选中还是取消选中开关(分别为true/false):

function setSwitchery(switchElement, checkedBool) {
    if((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
        switchElement.setPosition(true);
        switchElement.handleOnchange(true);
    }
}

用法示例:

var mySwitch = new Switchery($('#mySwitchCheck')[0], {
            size:"small",
            color: '#0D74E9'
        });
//Checks the switch
setSwitchery(mySwitch, true);
//Unchecks the switch
setSwitchery(mySwitch, false);

希望这有助于其他人

Answer 3

你可以简化这个：

// Uncheck: first set checked property to 'true', then uncheck to force UI update
$(".switchery").prop('checked', false).trigger("click");

// Check
$(".switchery").prop('checked', true).trigger("click");

Answer 4

首先，您必须在初始化期间将所有开关存储在阵列中

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
    switchery[html.getAttribute('id')] = new Switchery(html);
});

并创建一个本地功能来像这样切换开关

toggleSwitchery(id)
{
    var s = switchery[id];
    s.setPosition(true);
    s.handleOnchange(true);
}

这对我有用。万一您遇到任何UI问题，即switch移了一些额外的像素，然后打开switchery.js并在Switchery.prototype.setPosition函数中将jack.offsetWidth替换为30

Answer 5

尝试这个：

function changeSwitchery(element, checked) {
  if ( ( element.is(':checked') && checked == false ) || ( !element.is(':checked') && checked == true ) ) {
    element.parent().find('.switchery').trigger('click');
  }
}

用法示例：

var element = $('#sound-active-input');
changeSwitchery(element, false);