используйте jquery для выбора нескольких элементов из списка элементов без использования флажка

Question

У меня есть список элементов, сгенерированных в результате поиска.

этот список (скажем, 10) элементов, которые я изначально хотел использовать для каждого элемента.

потому что я хочу, чтобы мне было легче пометить несколько элементов, а затем нажать кнопку «Удалить выбранное».

однако есть ли способ не использовать флажок? Я предпочитаю каким-то образом выбирать и снимать выделение с элементов, а цвет фона изменений строки элемента изменяется.

я слышал о jquery, но все, что я получаю, прибегая к помощи "выбрать несколько 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

Кроме того, ознакомьтесь с пользовательским интерфейсом jQuery Выбирается . Затем вы можете использовать неупорядоченный список, и перетаскивание мыши выберет несколько. Например, загрузите код с Wrox's Beginning JavaScript и CSS с помощью jQuery и ознакомьтесь с кодом главы 12.

Answer 3

попробуйте что-то вроде этого, используя javascript / jquery:

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