2009-08-09 1 views
1

検索で生成された項目のリストがあります。jqueryを使用してチェックボックスを使用せずに項目のリストから複数の項目を選択する

このリスト(たとえば10個)のアイテムは、最初は各アイテムにチェックボックスを使用したいと考えていました。

私は複数の項目にマークを付けて「選択した項目を削除」ボタンを押すことが容易になりたいからです。

ただし、チェックボックスを使用しない方法はありますか?私は何とか項目を選択して選択を解除し、項目行の背景色が変わることを好みます。

私はjqueryについて聞いたことがありますが、私が選んだリストでjqueryを使用する方法については、「select multiple jquery」はヒットです。それは私が探しているものとは違うものです。

意味選択リストは必要ありません。

私のアイテムリストは、テーブルタグまたはdivタグで生成されます。

今、PHPを使用しています。

答えて

4

複数の選択を可能にする選択リストを使用することができます。たとえば:

<select name="foo" size="20" multiple> 
    <option value="...">...</option> 
    ... 
</select> 

これを行うための別の方法は、テーブルを使用して、いくつかのかなり初歩的なJavascriptを/ jQueryを使ってその機能を作成することです。

<table id="select"> 
<tr> 
    ... 
</tr> 
... 
</table> 
<input type="button" id="delete" value="Delete Selected Items"> 

が使用:

$(function() { 
    $("#select tr").hover(function() { 
    $(this).addClass("hover"); 
    }, function() { 
    $(this).removeClass("hover"); 
    }).click(function() { 
    $(this).toggleClass("selected"); 
    }); 
    $("#delete").click(function() { 
    $("#select tr.selected").remove(); 
    }); 
}); 

と、このCSS:この表では

#select { border-collapse: collapse; } 
#select tr td { background-color: white; color: black; } 
#select tr.hover td { background-color: yellow; color: black; } 
#select tr.selected td { background-color: blue; color: white; } 
+0

私はこれをアップヴォートするのが大好きですが、あなたが提供した最初の答えは、彼が避けようとしていることを明示的に示しています。あなたの2番目の答えは正しいと思われますが、選択したボタンをクリックしたときにアイテムを再選択する方法については言及していません。 – tvanfosson

+2

彼は、彼はチェックボックスを避けたいと言うだけです。私はリストに対して何も見ません。 – cletus

+1

私は選択リストを探していないと言いました。 2番目の最後の行を参照してください: 私はjqueryについて聞いていますが、私はグーグル "select multiple jquery"から取得するのは、選択リストでjqueryを使用する方法のヒットです。それは私が探しているものとは違うものです。 私はクリアするために1行追加すると思います。いずれにしても、 の努力を感謝します。ありがとうございました。 –

0

のjavascript/jqueryのを使用して、このような何かを試してみてください。

また
function SelectAllTableCheckboxes(tableName, checked) 
{ 
    $('#' + tableName + ' >tbody >tr >td >input:checkbox').attr('checked', checked); 
}; 
0

、チェックアウトjQuery UIのSelectable。次に、順序のないリストを使用し、マウスをドラッグすると複数のものが選択されます。たとえば、Wrox's Beginning JavaScript and CSS with jQueryからコードをダウンロードし、第12章のコードを確認してください。

関連する問題