从代码更改 Switchery 复选框状态答案

【问题标题】：Changing a Switchery checkbox state from code从代码更改 Switchery 复选框状态
【发布时间】：2014-03-22 18:33:06
【问题描述】：

如何以编程方式将 jQuery Switchery 复选框状态从选中更改为未选中（反之亦然）？

我尝试在复选框元素上使用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'));

【问题讨论】：

你有我们的代码吗？

标签： javascript jquery jquery-plugins checkbox

【解决方案1】：

试试这个：

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

它应该触发点击和切换。或者这个：

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

【讨论】：

这会改变渲染复选框的状态，但是当我运行函数 global_switch_sound.markedAsSwitched() 时，无论复选框的状态如何，它总是返回“true”。跨度>
好的，这个应该没问题，因为我为元素运行了“isChecked()”函数，它显示了正确的状态。你知道是否有一个本地函数来改变状态，而不是使用这个解决方法？
你的意思是 Switchery 里面有没有功能？
我从未使用过该插件，但在插件页面上找不到任何内容
点击触发器由于某种原因不起作用，我认为这可能是由于插件将 ID 复制到开关的新 span 元素..检查它..

【解决方案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);

希望这对其他人有帮助

【讨论】：

我将该条件与Aamir's solution 一起使用（使用在页面加载时分配的切换对象数组）。这样我就避免了重新创建 new Switchery 对象。
它比公认的答案更好，因为它也适用于禁用的开关。

【解决方案3】：

试试这个：

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);

【讨论】：

我认为这是最简单、最灵活的答案。你可以通过element.click() 让它变得更简单。谢谢！

【解决方案4】：

你可以简化这个：

// 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");

【讨论】：

【解决方案5】：

首先，您必须在初始化期间将所有开关存储在一个数组中

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

【讨论】：

谢谢...我最近两天一直在搜索这个

【解决方案6】：

这样的简单设置与您的复选框 id，

$('#sound-active-input').prop('checked', true);

演示http://jsfiddle.net/yeyene/VHZY8/2/

【讨论】：

谢谢。当我在控制台中运行它以更改状态时，它对我不起作用
它不起作用，因为您在初始化插件之前更改了状态。问题是，如何在初始化后更改状态。

【解决方案7】：

function toggleSwitch(switch_elem, on) {
    if (on){ // turn it on
        if ($(switch_elem)[0].checked){ // it already is so do 
            // nothing
        }else{
            $(switch_elem).trigger('click').attr("checked", "checked"); // it was off, turn it on
        }
    }else{ // turn it off
        if ($(switch_elem)[0].checked){ // it's already on so 
            $(switch_elem).trigger('click').removeAttr("checked"); // turn it off
        }else{ // otherwise 
            // nothing, already off
        }
    }
}

使用调用

toggleSwitch("#switch_element", true);
toggleSwitch("#switch_element", false);

需要错误检查和其他东西，但效果很好，需要 jQuery 并在 Switchery 0.8.1 上进行了测试，它与我一直在使用的预构建主题打包在一起（Altair 管理员）

【讨论】：

【解决方案8】：

当您需要选中/取消选中所有切换复选框时，使用 JQuery 的解决方案是：

$( '.js-switches' ).each( function() {
// for checking
    if ( !this.checked ) $( this ).trigger( 'click' );
// for unchecking
    if ( this.checked ) $( this ).trigger( 'click' );
} );

希望对你有帮助。

【讨论】：

【解决方案9】：

试试这个：

function changeSwitch(switch_id,active) {
    var check = document.querySelector(switch_id);
    //console.log("check",switch_id,check.checked,"to",active);
    if ( !check.checked && active ){
        var c = $(check).next('span').attr("class").replace("switchery ","");
        var l = {"switchery-large":"26px","switchery-small":"13px","switchery-default":"20px"}; 
        $(check).prop("checked",true).next('span').attr("style","box-shadow: rgb(38, 185, 154) 0px 0px 0px 16px inset; border-color: rgb(38, 185, 154); background-color: rgb(38, 185, 154); transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;").find('small').attr("style","left: "+l[c]+"; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);");
    }else if ( check.checked && !active ){
        $(check).prop("checked",false).next('span').attr("style","box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;").find('small').attr("style","left: 0px; transition: background-color 0.4s, left 0.2s;");
    }
}

changeSwitch(".js-switch",true);

如果您尝试使用此方法重置表单，请在此之前使用它：

changeSwitch(".js-switch",true);
$("#frm_id").trigger("reset");

【讨论】：

【解决方案10】：

结合几个答案，适用于 v0.8.2。

    function setSwitchery(switchElement, checkedBool) {
        if (checkedBool && !switchElement.checked) { // switch on if not on
            $(switchElement).trigger('click').attr("checked", "checked");
        } else if (!checkedBool && switchElement.checked) { // switch off if not off
            $(switchElement).trigger('click').removeAttr("checked");
        }
    }

示例用法：

var switchElement = $('#mySwitchInput');
setSwitchery(switchElement, false);

【讨论】：

(!switchElement.checked) 无法正常工作。在我的情况下，我用 (!switchElement.is(':checked')) 解决了它

【解决方案11】：

我从本地 github 问题跟踪器链接中找到了解决方案。这是工作示例：http://jsfiddle.net/3am89/

这是您需要添加并手动调用此函数以重新渲染按钮的一段代码：

function onChange(el) {
    if (typeof Event === 'function' || !document.fireEvent) {
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        el.dispatchEvent(event);
    } else {
        el.fireEvent('onchange');
    }
}

描述这个场景的问题是 https://github.com/abpetkov/switchery/issues/27

【讨论】：

【解决方案12】：

如果您将开关与 Bootstrap 折叠一起使用，则以编程方式设置状态将无法每秒展开数据目标。我假设的点击处理程序的计时问题。这使它工作

     function setSwitchery(switchElement, checkedBool) {

        if (checkedBool && !switchElement.checked) { // switch on if not on
            $(switchElement).trigger('click').prop("checked", false);
            // make sure the data target shows
            $($(switchElement).data('target')).addClass('show');
        } else if (!checkedBool && switchElement.checked) { // switch off if not off
            $(switchElement).trigger('click').prop("checked", false);
            $($(switchElement).data('target')).removeClass('show');
        }
    }

【讨论】：

【解决方案13】：

HTML

<input type="checkbox" class="form-check-input-switchery radio-checkbox" id="chkId">

Javascript

 new Switchery("#chkId");
 chkId.element.checked = true; //true or false
 chkId.handleOnchange();

【讨论】：

【解决方案14】：

如果$('#sound-active-input').click() 对您不起作用，您可以尝试触发对复选框后切换器创建的跨度的点击。

$('#sound-active-input').next('span').click();

这是对我有用的唯一方法。希望对您有所帮助。

【讨论】：

【解决方案15】：

    $('selector').click(function () {
        $("selector").toggle(this.checked);
    });


if you are using jquery version <1.6

use this 
$('#checkMeOut').attr('checked');

【讨论】：

不起作用，只是在原始复选框周围显示一个黑色边框，该复选框隐藏在代码中以显示渲染的复选框
这不会改变渲染复选框的状态（视觉上）

【解决方案16】：

我不确定您是否找到了解决此问题的方法，因为我也遇到了同样的问题，并且在阅读了您与 @Rickdep 的讨论后，尽管他无法为您提供帮助（尽管他发布的解决方案有检查旁边），你们确实为我指明了正确的方向，我能够提出解决方案，所以谢谢。无论如何，这是我想出的解决方案。

首先，您需要在您的 $('.class').click(); 上使用通过 switchery.js 生成的 span 元素上设置的类。功能：例如，在我的解决方案中生成的跨度如下所示：

<span class="switcher-questionnaire" style="border-color: rgb(121, 186, 97); box-shadow: rgb(121, 186, 97) 0px 0px 0px 16px inset; transition: border 0.7s, box-shadow 0.7s, background-color 2.0999999999999996s; -webkit-transition: border 0.7s, box-shadow 0.7s, background-color 2.0999999999999996s; background-color: rgb(121, 186, 97);">

<small style="left: 50px; transition: left 0.35s; -webkit-transition: left 0.35s;"></small>

</span>

由于我告诉 switchery.js 在这个解决方案中生成的类是“switcher-questionnaire”，这就是我想在我的点击功能中使用的类，它看起来像这样：

$('.switcher-questionnaire').click( function() {
        if ($(this).children('small').css("left") === '50px') {
            $('.questionnaire-overlay').show();
        } else {
            $('.questionnaire-overlay').hide();
        }
        console.log('Clicked');
});

对于我的解决方案，我希望能够使用该开关隐藏和显示一个覆盖层，如果用户确定该部分“不适用”，则该覆盖层会禁用对用户正在查看的指定内容的访问。由于 switchery.js 隐藏了复选框并将该复选框替换为创建我们都想要的 Apple 式开关的跨度，但由于 switchery.js 实际上并没有更改隐藏复选框的选中/未选中状态，因此您无法使用正在根据复选框“checked”属性主动验证的布尔语句。在这种情况下，我注意到开关在切换时所做的最重要的变化是将“小”元素的左侧位置从 50px 更改为单击时的 0px：

<small style="left: 50px; transition: left 0.35s; -webkit-transition: left 0.35s;"></small>

我选择了这个作为我将使用的布尔解决方案来检查一点 jQuery 的神奇酱汁。

在编程方面我几乎是个菜鸟，但我觉得如果我在解决这个问题时解释我的一些思考过程会很有帮助。

【讨论】：

【解决方案17】：

对于 AngularJS 版本，uiSwitch 指令不完整，无法支持这一点。您必须在更新切换器值的 uiSwitch 指令中为 ngModel 添加 $formatter。

ngModel.$formatters.push(function(value) {

    $timeout(function() {

        ngModel.$setViewValue(value);
        switcher.setPosition(value);

    });

});

这样，当您更新代码中的模型时，将反映在 ui-switch 指令中。

JSFiddle demo

【讨论】：

【解决方案18】：

请检查！

function changeSwitch(sltor,active) {
    var check = $(sltor).get(0);
    if ( (!check.checked && active) || (check.checked && !active) ){
        $(check).next('span').trigger('click')
    }
}
changeSwitch('.onlyOnThisDate',false);

【讨论】：

【解决方案19】：

elems.forEach(function(html) {
    let switchery = new Switchery(html, {
        size: 'medium',
        secondaryColor: '#DC3545'
    });
});

【讨论】：

【解决方案20】：

我的回答：因为我不想触发将执行定义函数的更改事件

var myCheckbox = $("id_your_checkbox")

// your new value true or false
myCheckbox.checked = true;

//remove the old switchery
$('#' + myCheckbox.id).siblings("span.switchery").remove();

//and recreate the switchery
new Switchery(document.querySelector('#' + myCheckbox.getAttribute('id') + ''), {
    color: '#1abc9c',
    jackColor: '#fff'
});

【讨论】：