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


215

Я знаю, что могу получить все отмеченные флажки на странице, используя это:

$('input[type=checkbox]').each(function () {
    var sThisVal = (this.checked ? $(this).val() : "");
});

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


Должен ли я обновить название, чтобы сказать classвместо name?
Russ Cam

@Russ Cam - уже готово
leora

$ ('input [type = checkbox] :checked') тоже будет работать.
очень круто,

Ответы:


392

$('.theClass:checkbox:checked')даст вам все отмеченные флажки с классом theClass.


9
Ницца. Кроме того, $ ('. TheClass: checkbox: not (: флажок)') получит все непроверенные.
Венугопал М

Могу ли я сделать это для всех флажок с именем?
FluffyBeing

Как я могу добавить другой класс на проверенные элементы? Я хочу показать границу на проверенных элементах ввода.
Наджам Ус Сакиб

120
$('input:checkbox.class').each(function () {
       var sThisVal = (this.checked ? $(this).val() : "");
  });

Пример для демонстрации.

:checkboxявляется селектором для флажков (на самом деле, вы могли бы опустить inputчасть селектора, хотя я нашел нишевые случаи, когда вы могли бы получить странные результаты, делая это в более ранних версиях библиотеки. Я уверен, что они исправлены в более поздних версиях). .classявляется селектором для атрибута класса элемента, содержащего class.


9
Замечания по Jquery: checkbox рекомендует придерживаться [type = "checkbox"]. $ ('[type = "checkbox"]. class') .... или $ ('input [type = "checkbox"]. class')
TSmith

@ TSmith у вас есть ссылка?
Russ Cam

9
Я прочитал это отсюда: api.jquery.com/checkbox-selector ... в разделе «Дополнительные заметки»
TSmith

73

Обязательный .mapпример:

var checkedVals = $('.theClass:checkbox:checked').map(function() {
    return this.value;
}).get();
alert(checkedVals.join(","));

3
$ ('input.theClass: флажок'). map (function () {вернуть this.value}). get (). join (',');
Федир РИХТИК

@Fedir: ваша команда выдает on,onрезультат ('on' для каждого флажка)
Jay

@Jay Вам нужно установить атрибуты значения ваших флажков, чтобы получить их значение в строке, разделенной комой
Кямран Али

21
$('input.yourClass:checkbox:checked').each(function () {
    var sThisVal = $(this).val();
});

Это получит все чекбоксы с именем класса "yourClass". Мне нравится этот пример, поскольку он использует проверенный селектор jQuery вместо условной проверки. Лично я бы также использовал массив для хранения значения, а затем использовал бы их по мере необходимости, например:

var arr = [];
$('input.yourClass:checkbox:checked').each(function () {
    arr.push($(this).val());
});

Если необходимо сохранить значения в массиве, это .mapможет быть более приятной альтернативой, как показано в ответе karim79.
дупло

1
спасибо :) мне нужно было найти все флажки, и ваш ответ делает это.
UFK

13

Если вам нужно получить значение всех отмеченных флажков в виде массива:

let myArray = (function() {
    let a = [];
    $(".checkboxes:checked").each(function() {
        a.push(this.value);
    });
    return a;
})()


8

Я не уверен, поможет ли это в вашем конкретном случае, и я не уверен, что в вашем случае все флажки, которые вы хотите включить, являются частью одной формы, элемента div или таблицы, но вы всегда можете выбрать все флажки. внутри определенного элемента. Например:

<ul id="selective">
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
 <li><input type="checkbox" value="..." /></li>
</ul>

Затем, используя следующий jQuery, он ТОЛЬКО проходит через флажки в этом UL с id = "селективный":

$('#selective input:checkbox').each(function () {
 var sThisVal = (this.checked ? $(this).val() : "");
});


7

Вы можете использовать что-то вроде этого:
HTML:

<div><input class="yourClass" type="checkbox" value="1" checked></div>
<div><input class="yourClass" type="checkbox" value="2"></div>
<div><input class="yourClass" type="checkbox" value="3" checked></div>
<div><input class="yourClass" type="checkbox" value="4"></div>


JQuery:

$(".yourClass:checkbox").filter(":checked")


Он выберет значения 1 и 3.


Это лучший ответ.
Маркос Бурке

7

Простой способ получить все значения в массив

var valores = (function () {
    var valor = [];
    $('input.className[type=checkbox]').each(function () {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);

7

Вы можете попробовать вот так

let values = (function() {
                let a = [];
                $(".chkboxes:checked").each(function() {
                    a.push($(this).val());
                });
                return a;
            })();

4
<input type="checkbox" id="Checkbox1" class = "chk" value = "1" />
<input type="checkbox" id="Checkbox2" class = "chk" value = "2" />
<input type="checkbox" id="Checkbox3" class = "chk" value = "3" />
<input type="checkbox" id="Checkbox4" class = "chk" value = "4" />
<input type="button" id="demo" value = "Demo" />

<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $("#demo").live("click", function () {
        $("input:checkbox[class=chk]:checked").each(function () {
            alert("Id: " + $(this).attr("id") + " Value: " + $(this).val());
        });
    });
</script>

http://www.jqueryfaqs.com/Articles/Get-values-of-all-checked-checkboxes-by-class-name-using-jQuery.aspx


3

Я знаю, что у этого уже есть куча хороших ответов на этот вопрос, но я нашел это, просматривая, и нахожу это действительно простым в использовании. Мысль, которую я поделюсь для всех, кто ищет.

HTML:

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

JQuery:

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});

Ссылка: проще всего "проверить все" с помощью jQuery


1
$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});

пожалуйста, подумайте над добавлением комментария, чтобы объяснить ваш ответ, чтобы его было легче понять непосвященным
Симас Джонелиунас

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.