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

84

Я хочу пройти через группу флажков «locationthemes» и построить строку со всеми выбранными значениями. Таким образом, когда установлены флажки 2 и 4, результат будет: «3,8».

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

Я проверил здесь: http://api.jquery.com/checked-selector/, но нет примера, как выбрать группу флажков по ее имени.

Как я могу это сделать?

javascript jquery Фло
источник

Ответы:

181

В jQuery просто используйте селектор атрибутов, например

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

выбрать все отмеченные входы с именем "locationthemes"

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Демо

В VanillaJS 

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Демо

В ES6 / оператор распространения

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Демо

Фабрицио Кальдеран
источник
5
Вы, мой друг, спасаете жизнь.
Haring10
Особенно мне нравится идея использования консольных журналов. Спасибо за это.
So S
32 
$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

Рабочая демонстрация

ИЛИ ЖЕ

Используйте is()функцию jQuery :

$('input:checkbox[name=locationthemes]').each(function() 
{    
    if($(this).is(':checked'))
      alert($(this).val());
});

Взаимодействие с другими людьми

Тальха
источник
19

Сопоставить массив - самый быстрый и чистый. 

var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })

вернет значения в виде массива, например:

array => [2,3]

предполагая, что замок и сарай были проверены, а другие нет.

Стеффан Перри
источник
13

$("#locationthemes").prop("checked")

usr4217
источник
Это должен быть комментарий
Гаджендра К. Чаухан
12

Использование mapфункции jquery

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});
МэйлорТейлор
источник
при том понимании, что checkboxName в этом примере должно быть «locationthemes»
hrabinowitz
5 
You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();
Тушар Сагар
источник
1
Как присвоить этот результат переменной
Мано Джонбритто
2

Итак, все в одной строке:

var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");

... примечание о селекторе [id*="checkbox"], он захватит любой элемент со строкой "checkbox" в нем. Немного неуклюже, но действительно хорошо, если вы пытаетесь вытащить выбранные значения из чего-то вроде .NET CheckBoxList. В этом случае «флажок» будет именем, которое вы дали элементу управления CheckBoxList.

Майк
источник
1
Это полезно @mike
Yii2Developer
2

Источник - Подробнее

Получить значение выбранных флажков с помощью jQuery

Затем мы пишем скрипт jQuery для получения выбранного значения флажка в массиве с помощью jQuery each (). Используя эту функцию jQuery, он запускает цикл, чтобы получить проверенное значение и поместить его в массив. 

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Get Selected Checkboxes Value Using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".btn").click(function() {
                var locationthemes = [];
                $.each($("input[name='locationthemes']:checked"), function() {
                    locationthemes.push($(this).val());
                });
                alert("My location themes colors are: " + locationthemes.join(", "));
            });
        });
    </script>
    </head>
    <body>
        <form method="POST">
        <h3>Select your location themes:</h3>
        <input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
        <label for="checkbox-1">Castle</label>
        <input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
        <label for="checkbox-2">Barn</label>
        <input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
        <label for="checkbox-3">Restaurant</label>
        <input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
        <label for="checkbox-4">Bar</label>
        <br>
        <button type="button" class="btn">Get Values</button>
    </form>
    </body>
    </html>
thecodedeveloper.com
источник
2 
var SlectedList = new Array();
$("input.yorcheckboxclass:checked").each(function() {
     SlectedList.push($(this).val());
});
Хуррам Шаукат
источник
1
Пожалуйста, объясните свой ответ.
Word Rearranger
1 
var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});
Анмол Мурья
источник
Обновление:var voyageIds = $('input[name="voyageId[]"]:checked:enabled').map(function() {return this.value; }).get();
Уильям
0

JQuery 3.3.1, получение значений для всех отмеченных флажков при нажатии кнопки

$(document).ready(function(){
 $(".btn-submit").click(function(){
  $('.cbCheck:checkbox:checked').each(function(){
	alert($(this).val())
  });
 });			
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="vehicle1" name="vehicle1"  class="cbCheck" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2"  class="cbCheck" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3"  class="cbCheck" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit" class="btn-submit">
Развернуть фрагмент

Бхану Пратап
источник
0

Чуть более современный способ сделать это:

const selectedValues = $('input[name="locationthemes"]:checked').map( function () { 
        return $(this).val(); 
    })
    .get()
    .join(', ');

Сначала мы находим все выбранные флажки с заданным именем, а затем jQuery map () выполняет итерацию по каждому из них, вызывая обратный вызов для получения значения и возвращая результат в виде новой коллекции jQuery, которая теперь содержит значения флажков. Затем мы вызываем для него get (), чтобы получить массив значений, а затем join (), чтобы объединить их в одну строку, которая затем присваивается константе selectedValues.

Иванго
источник