use jquery to select multiple items from a list of items without the use of checkbox

Question

i have a list of items generated from a search.

this list of (say, 10) items i initially wanted to use checkbox for each item.

because i want to make it easy for me to mark multiple items and then press a "delete selected" button.

however is there a way not to use checkbox? i prefer to somehow select and deselect the items and the background color of the item row changes.

i heard about jquery but all i get from googling "select multiple jquery" are hits on how to use jquery in a select list. which is different from what i am looking for.

Meaning I do NOT want a select list.

my list of items are generated in a table tags or div tags.

Now using php.

Answer 1

You could just use a select list that allows multiple selection. For example:

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

Another way of doing this is to use a table and create that functionality with some fairly rudimentary Javascript/jQuery. With this table:

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

use:

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

and this 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; }

Answer 2

try something like this using javascript/jquery:

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

Answer 3

Also, check out jQuery UI's Selectable. You could then use an unordered list and dragging the mouse would select multiple. For an example, download the code from Wrox's Beginning JavaScript and CSS with jQuery and check out chapter 12's code.