web-dev-qa-db-ja.com

コードからSwitcheryチェックボックスの状態を変更する

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'));
javascriptjqueryjquery-pluginscheckbox
28
Idan Shechter

これを試して：

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

クリックとスイッチをトリガーする必要があります。 OR this：

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

誰かが私のような人で、DOMの「.click（）」を超えるソリューションが必要な場合。次の関数は、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);

これが誰かの助けになることを願って

26
Tom G

最初に、初期化中にすべてのスイッチを配列に保存する必要があります

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を開き、jack.offsetWidthを30で置き換えます Switchery.prototype.setPosition 関数

6
Aamir Syed

これを試して：

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);
5
Pedro Soares
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が必要で、私が使用しているビルド済みテーマ（Altair Admin）でパッケージ化されたSwitchery 0.8.1でテストされています。

3
Hugo Rune

チェックボックスIDを使用してこのように設定すると、

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

デモ http://jsfiddle.net/yeyene/VHZY8/2/

3
yeyene

これを単純化できます：

// 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");
2
DMARC Analyzer - Michiel

いくつかの回答を組み合わせて、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);
1
Josh

AngularJSバージョンの場合、これをサポートするためのuiSwitchディレクティブは不完全です。スイッチャー値を更新するuiSwitchディレクティブにngModelの$ formatterを追加する必要があります。

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

    $timeout(function() {

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

    });

});

これにより、コード内のモデルを更新すると、ui-switchディレクティブに反映されます。

JSFiddleデモ

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


if you are using jquery version <1.6

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

すべての切り替えチェックボックスをオン/オフにする必要がある場合、JQueryを使用したソリューションは次のとおりです。

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

それが役に立てば幸い。

0
Özkan Azazi

ネイティブの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 です

0
Amit Shah

私も同じ問題を抱えており、@ Rickdepとの議論を読んだ後、彼があなたを助けられなかったにもかかわらず、彼が投稿した解決策の隣にチェックがありますが、この問題の解決策を見つけたかどうかはわかりませんそれ）、皆さんが私を正しい方向に向けてくれたので、解決策を思いついたので、ありがとう。とにかく、ここに私が思いついた解決策があります。

まず、switchery.jsで生成しているspan要素の$（ '。class'）。click（）で設定されたクラスを使用する必要があります。関数：たとえば、私のソリューションで生成されているスパンは次のようになります。

<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の魔法のソースでチェックするためのブール型ソリューションとして使用するものとして選択しました。

プログラミングに関しては私はかなり初心者ですが、この問題を解決する際に自分の思考プロセスの一部を説明しておくと役に立つと感じました。

0
user3517582

これをチェックしてください！

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

これを試して：

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

$（ '＃sound-active-input'）。click（）が機能しなかった場合は、スイッチャーがチェックボックスの後に作成するスパンのクリックをトリガーしてみることができます。

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

それが私にとっては唯一の方法でした。それが役に立てば幸い。

0
Jonathan Ramos