从代码更改 Switchery 复选框状态

Posted 2023-02-22

技术标签:

【中文标题】从代码更改 Switchery 复选框状态【英文标题】：Changing a Switchery checkbox state from code 【发布时间】：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'));

【问题讨论】：

你有我们的代码吗？ 【参考方案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'
);

【讨论】：

以上是关于从代码更改 Switchery 复选框状态的主要内容，如果未能解决你的问题，请参考以下文章

通过列表框项目选择c#更改复选框的状态

如何正确更改从数据库中提取的复选框的状态

从 React 中的 useEffect 挂钩更改复选框选中状态？

在复选框状态更改时从回收器视图适配器更新 sqlite 数据库

如何在此处更改复选框的状态？

JQuery 正在更改复选框值，但复选框未显示为选中状态