Получение значений отмеченных флажков в JQuery

Question

Я новичок в jquery, и у меня были сомнения.У меня есть следующий скрипт jQuery для проверки количества отмеченных флажков.

<script>
function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checked").click(countChecked);
</script>

Однако это работает, если у меня только один набор флажков на всей странице.Однако у меня есть несколько различных наборов флажков и переключателей на странице.Флажки, к которым я хочу привязать jQuery, имеют атрибут name как «selectArticle []».

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

Может кто-нибудь изменить вышеуказанный скрипт для меня, пожалуйста ... спасибо!

Answer 1

Фильтр по атрибуту ^{[документы]} .Я думаю, что ваш код на самом деле не правильный, вы привязываете обработчик событий только к элементам, которые уже выбраны.Если вы хотите связать его со всеми флажками этой группы, выберите все из них:

var $checkboxes = $("input[name='selectArticle[]']");

function countChecked() {
  var n = $checkboxes.filter(":checked").length;
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}

$checkboxes.change(countChecked).change();

Кэширование элементов ($checkboxes) лучше, чем их поиск при каждом вызове обработчика.

Если вы действительно хотите привязать обработчик только к выбранным, привязайте обработчик события следующим образом:

$("input[name='selectArticle[]']:checked").change(countChecked).change();

Лучше привязать обработчик события к событию change (выборытакже можно изменить с помощью клавиатуры).

Вы также видите, что вместо вызова countChecked, оно вызывает событие change вручную, вызывая change после привязки обработчика события.

Answer 2

$ ("input [name = 'имя-флажка']: проверено"). Длина

где имя-флажка: имя списка флажков

Answer 3

Вместо того, чтобы делать

$("input:checked").length;

вы можете сделать

$("input[name='selectArticle[]']:checked").length;

атрибут [имя = определенное имя], как известно, вызывает некоторую задержку в вашем коде. Лучше дать всем вашим флажкам определенный класс, а затем сделать что-то вроде:

<script>
function countChecked() {
  var n = $("input.classname:checked").length;
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(".classname:checked").click(countChecked);
</script>

EDIT

Если вы хотите использовать значение, вы можете сделать что-то вроде:

<script>
function alertValues() {
  $("input.classname:checked").each(function() {
        alert($(this).val());
  }
}
alertValues();
</script>

Если вы теперь вызовите alertValues ​​(), он будет оповещать все значения для отмеченных полей.

Answer 4

Используйте что-то вроде этого:

$("input[name='selectArticle[]']:checked")