jquery mobileグループ化されたチェックボックス

Question

縦にグループ化されたチェックボックスを検索フィルタに設定します。

通常の検索フィルタリストを縦にグループ化されたチェックボックスのようにスタイル設定する方法はありますか？

または

私は、チェックボックスのグループに検索フィルタを追加することはできますか？

例を開始しました：

Answer 1

あなたは小さなスペースに圧縮するlistviewを取得するためにCSSを使用することができますhttp://jsfiddle.net/NwbZu/：ここでは

/*remove background color from search input*/ 
.ui-listview-filter { 
    background : none; 
} 
/*remove the vertical padding, background gradient, and border for each list-item*/ 
#dataPointList .ui-li { 
    padding : 0px 15px; 
    background : none; 
    border  : none; 
} 
/*remove the margin from the check-box container*/ 
#dataPointList .ui-li .ui-checkbox { 
    margin : 0; 
} 
/*remove the rounded corners from all of the .ui-btn elements*/ 
#dataPointList .ui-li .ui-checkbox .ui-btn-corner-all { 
    -webkit-border-radius : 0; 
    -moz-border-radius : 0; 
    border-radius   : 0; 
} 
/*re-add the rounded corners (top only) for the first list-item element*/ 
#dataPointList .ui-li:first-child .ui-checkbox .ui-btn-corner-all { 
    -webkit-border-top-left-radius : 1em; 
    -moz-border-top-left-radius  : 1em; 
    border-top-left-radius   : 1em; 
    -webkit-border-top-right-radius : 1em; 
    -moz-border-top-right-radius : 1em; 
    border-top-right-radius   : 1em; 
} 
/*re-add the rounded corners (bottom only) for the last list-item element*/ 
#dataPointList .ui-li:last-child .ui-checkbox .ui-btn-corner-all { 
    -webkit-border-bottom-left-radius : 1em; 
    -moz-border-bottom-left-radius  : 1em; 
    border-bottom-left-radius   : 1em; 
    -webkit-border-bottom-right-radius : 1em; 
    -moz-border-bottom-right-radius : 1em; 
    border-bottom-right-radius   : 1em; 
} 

はデモです：あなたはこれを検索する場合http://jsfiddle.net/NwbZu/2/

しませんデモで6を検索すると、リストが更新されます。アイテムが1つしかなく、すべての角が丸くなるように更新されることはありません。しかし、JSを使ってこれを達成することができます（CSSで表示可能な要素だけを選択できるかどうかはわかりません）。

質問がある場合はお知らせください。

Answer 2

セレクトメニューを使用したいが、2番目のページでオプションをフィルタリングするとどうなるでしょうか？ 良いアイデアですか？私は選択メニューにチェックボックスが変更されるたびに更新

... 
<select id="myselect" name="myselect" data-native-menu="false" multiple="multiple"> 
... 
<ul id="dataPointList" data-role="listview" data-filter="true"> 
... 

：

次の例では、私は選択メニューと分離したページ内のフィルタリストビューを作成しました。

最初のページに戻ると、適切なオプションが選択された選択メニューが表示されます。

コードは次のとおりです。http://jsfiddle.net/leandrocosta/NwbZu/108/