かえでBlog

色々なことを徒然と……

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

   

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

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

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

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

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

flip switch off flip switch on

サンプルソース(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');
		}
	});
});

サンプルソース(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>

	</div>
</div>

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

 - jQueryMobile, 開発 , , ,