開発 jQueryMobile

【jQuery Mobile】フリップスイッチ(On⇔Offスライダー)一括変更スクリプト

Jquery Mobileでフリップスイッチ(ON⇔OFFスライダー)を使っているのですが、JavaScriptで複数のフリップスイッチをON⇒OFFまたはON⇒OFFに変更する方法のメモ

どうやらselectIndexを変更すればうまく動くようです。

1を指定するとOn、0または-1を指定するとOffになります。

フリップスイッチの再描写は.slider('refresh')で可能です。

selectIndexの修正なのでjqueryのpropでの変更も可能です。

<

div ">
flip switch off

flip switch on

サンプルソース(javascript)

[javascript]
$(document).ready(function(){
$("#changeButton").on('click',function(){
if($(this).val() == "全件選択"){
$('select[data-role=slider]').each(function(){
//配列を使用するやりかた
$(this)[0].selectedIndex = 1;
$(this).slider('refresh');
});
$(this).val("全件解除").button('refresh');
}else{
$('select[data-role=slider]').each(function(){
//jqueryを使用するやり方
$(this).prop('selectedIndex', 0);
$(this).slider('refresh');
//$(this).prop('selectedIndex', 0).slider('refresh')でも可能
});
$(this).val("全件選択").button('refresh');
}
});
});
[/javascript]

サンプルソース(html)

[html]
<div data-role="page" id="selecter" data-theme="b">
<input type="button" name="change" value="全件選択" id="changeButton" />
<div data-role="content" style="text-align:center;" >
<label for="flip-a">スライダー1</label>
<select name="slider" id="flip-a" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flip-b">スライダー2</label>
<select name="slider" id="flip-b" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flip-c">スライダー3</label>
<select name="slider" id="flip-c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

&lt;/div&gt;

</div>
[/html]

デモはこちらで確認ができます。

-開発, jQueryMobile
-, , ,

© 2020 かえでBlog