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

我有一个搜索项目列表。使用jquery从项目列表中选择多个项目而不使用复选框

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

因为我想让我很容易标记多个项目，然后按下“删除选定”按钮。

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

我听说过jquery，但所有我从谷歌搜索“选择多个jquery”都是如何在选择列表中使用jQuery的命中。这与我所寻找的不同。

含义我不想要一个选择列表。

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

现在使用php。

来源

2009-08-09 Kim Stacks

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

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

来源

2009-08-09 14:52:49 cletus

我非常喜欢这个，但是你提供的第一个答案明确地表明了他所说的他试图避免的。你的第二个答案似乎正确，但没有解决在单击删除选定按钮时如何重新选择项目。 – tvanfosson 2009-08-09 15:02:08

他只说他想避开复选框。我没有看到任何违反名单的事情。 – cletus 2009-08-09 15:07:18

我没有提到我不在寻找选择名单。查看第二行最后一行：我听说过jquery，但所有我从谷歌搜索“选择多个jquery”都是如何在选择列表中使用jQuery的命中。这与我所寻找的不同。我想我会再增加1行来清除。无论如何，我欣赏所做的努力。谢谢。 – 2009-08-10 07:37:30

尝试这样使用JavaScript/jQuery的：

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

来源

2009-08-09 14:58:56

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

来源

2009-08-09 15:09:42

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

回答

相关问题