Question

我有一个从搜索中生成的项目列表。

这个（例如，10个）项目的列表，我最初想要使用每个项目的复选框。

因为我想让我轻松标记多个项目，然后按“删除所选”按钮。

然而有没有办法不使用复选框？我更喜欢以某种方式选择和取消选择项目行的项目和背景颜色。

我听说过jquery但是我从googling“select multiple jquery”获得的是关于如何在选择列表中使用jquery的点击。这与我正在寻找的不同。

意思是我不想要一个选择列表。

我的项目列表是在表格标签或div标签中生成的。

现在使用php。

Answer 1

您可以使用允许多项选择的选择列表。例如：

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

Answer 2

使用javascript / jquery尝试这样的事情：

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

Answer 3

另外，请查看jQuery UI的Selectable。然后，您可以使用无序列表并拖动鼠标将选择多个。例如，从Wrox's Beginning JavaScript and CSS with jQuery下载代码并查看第12章的代码。

使用jquery从项目列表中选择多个项目而不使用复选框

3 个答案: