Question

如何以编程方式将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'));

Answer 1

试试这个：

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

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

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

Answer 2

如果有人像我一样，想要一个超越＆＃34; .click（）＆＃34; 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

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

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问题，即开关移动一些额外的像素，然后打开switchery.js并在 Switchery.prototype.setPosition 函数中将jack.offsetWidth替换为30

Answer 4

试试这个：

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

Answer 5

使用您的复选框ID

进行简单设置

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

DEMO http://jsfiddle.net/yeyene/VHZY8/2/

Answer 6

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 Admin）

Answer 7

结合几个答案，适用于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);

Answer 8

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

Answer 9

如果在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');
        }
    }

Answer 10

我从本地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

Answer 11

您可以简化此操作：

<databaseChangeLog
        xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:ext="http://www.liquibase.org/xml/ns/dbchangelog-ext"
        xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.6.xsd
        http://www.liquibase.org/xml/ns/dbchangelog-ext http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-ext.xsd">

    <property name="host" value="dev.company.org" context="DEV"/>
    <property name="port" value="4008" context="DEV"/>
    <property name="user" value="DEV_USER" context="DEV"/>

    <property name="host" value="uat.company.org" context="UAT"/>
    <property name="port" value="4321" context="UAT"/>
    <property name="user" value="UAT_USER" context="UAT"/>

    <changeSet id="1" author="joe">
      <insert tableName="someTableName">
        <column name="host" type="varchar(255)" value="${host}"/>
        <column name="port" type="varchar(8)" value="${port}"/>
        <column name="user" type="varchar(255)" value="${user}"/>
      </insert>    
    </changeSet>
</databaseChangeLog>

Answer 12

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

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

希望有帮助。

Answer 13

请检查！

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

Answer 14

试试这个：

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

Answer 15

如果$（＆＃39;＃sound-active-input＆＃39;）。click（）不起作用，您可以尝试触发复选框后切换创建的范围点击。

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

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

Answer 16

对于AngularJS版本，uiSwitch指令不完整以支持此功能。您必须在uiSwitch指令中为ngModel添加$ formatter，以更新切换器值。

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

    $timeout(function() {

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

    });

});

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

JSFiddle demo

Answer 17

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

首先，您需要使用您在$（'。class'）上使用switchery.js生成的span元素上的类集。单击（）; function：例如，在我的解决方案中生成的跨度如下所示：

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

由于我告诉openshery.js在这个解决方案中生成的类是“switcher-questionnaire”，这是我想在我的click函数中使用的类，如下所示：

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

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

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

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

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

Answer 18

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


if you are using jquery version <1.6

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

Answer 19

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

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

19 个答案:

DEMO http://jsfiddle.net/yeyene/VHZY8/2/