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

Question

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

Я хочу пройти через checkboxgroup '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/ но нет примера, как выбрать checkboxgroup по его имени.

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

1166 9

jQuery javascript

9 ответов:

Comments

Ничего не найдено.

fcalderan · Accepted Answer · 2016-10-26 11:38:26

в 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); 
});
демо

Talha · Accepted Answer · 2012-07-03 08:02:04

$('input:checkbox[name=locationthemes]:checked').each(function() 
{
   // add $(this).val() to your array
});

работающего демо

или

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

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

MaylorTaylor · Accepted Answer · 2015-03-24 21:13:24

используя jquery map функции

var checkboxValues = [];
$('input[name=checkboxName]:checked').map(function() {
            checkboxValues.push($(this).val());
});

Steffan Perry · Accepted Answer · 2016-03-03 21:08:35

карта массива является самым быстрым и чистым.
var array = $.map($('input[name="locationthemes"]:checked'), function(c){return c.value; })
возвращает значения в виде массива типа:
array => [2,3]
предполагая, что замок и сарай были проверены, а остальные нет.

Charles · Accepted Answer · 2016-05-18 12:41:11

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

7

2016-05-18 12:41:11

Tushar Sagar · Accepted Answer · 2014-02-24 13:05:39

You can also use the below code
$("input:checkbox:checked").map(function()
{
return $(this).val();
}).get();

mike · Accepted Answer · 2015-07-03 02:05:32

Так что все в одну строку:
var checkedItemsAsString = $('[id*="checkbox"]:checked').map(function() { return $(this).val().toString(); } ).get().join(",");
..заметка о селекторе [id*="checkbox"], он будет захватывать любой элемент со строкой "флажок" в нем. Немного неуклюжий здесь, но очень хорошо, если вы пытаетесь вытащить выбранные значения из чего-то вроде .NET CheckBoxList. В этом случае "checkbox" будет именем, которое вы дали элементу управления CheckBoxList.

Anmol Mourya · Accepted Answer · 2018-05-21 16:58:49

var voyageId = new Array(); 
$("input[name='voyageId[]']:checked:enabled").each(function () {
   voyageId.push($(this).val());
});

thecodedeveloper.com · Accepted Answer · 2018-08-12 12:21:58

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

получить выбранное значение флажков с помощью 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>