Використовуючи 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 (: галочка)') отримає всі неперевірені.
Venugopal M

Чи можу я зробити це для всіх прапорців з ім'ям?
FluffyBeing

Як я можу додати ще один клас на перевірені елементи? Я хочу показати рамку на перевірених вхідних елементах.
Najam Us Saqib

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

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

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


9
Jquery примітки про: прапорець рекомендує дотримуватися [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 () {return this.value}). get (). join (',');
Федір РИХТИК

@Fedir: ваша команда дає on,onрезультат ("увімкнено" для кожного прапорця)
Jay,

@Jay Вам потрібно встановити значення атрибутів ваших прапорців, щоб отримати їх значення в рядку, відокремленому комою
Kamran Ali

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

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

8

Я не впевнений, чи допомагає це у вашому конкретному випадку, і я не впевнений, якщо у вашому випадку всі прапорці, які ви хочете включити, є частиною єдиної форми або поділу або таблиці, але ви завжди можете встановити всі прапорці всередині конкретного елемента. Наприклад:

<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-cont-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');
        }
    });
});

будь ласка, подумайте, щоб додати коментар, щоб пояснити свою відповідь, щоб легше було зрозуміти для непосвячених
Сімас Йонеліунас,

-1
$("input[name='<your_name_of_selected_group_checkboxes>']:checked").val()

1
поясніть, будь ласка, про що цей код. Це допоможе іншим зрозуміти
Шафін Махмуд
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.