【jQuery Mobile】フリップスイッチ（On⇔Offスライダー）一括変更スクリプト
2014年5月17日
Jquery Mobileでフリップスイッチ（ON⇔OFFスライダー）を使っているのですが、JavaScriptで複数のフリップスイッチをON⇒OFFまたはON⇒OFFに変更する方法のメモ
どうやらselectIndexを変更すればうまく動くようです。
1を指定するとOn、0または-1を指定するとOffになります。
フリップスイッチの再描写は.slider('refresh')で可能です。
selectIndexの修正なのでjqueryのpropでの変更も可能です。
<
div ">
サンプルソース（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">スライダー１</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">スライダー２</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">スライダー３</label>
<select name="slider" id="flip-c" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
