JQuery значения флажка в списке через запятую - PullRequest
Новая
       21

JQuery значения флажка в списке через запятую

11 голосов
/ 07 марта 2012

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

<input type="checkbox" name="example[]" value="288" />
<input type="checkbox" name="example[]" value="289" />
<input type="checkbox" name="example[]" value="290" />

Например, если выбраны первое и последнее поле, вывод будет: 

var output = "288,290";

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

Ответы [ 4 ]

23 голосов
/ 07 марта 2012

Вы можете использовать :checkbox и селектор атрибута имени (:checkbox[name=example\\[\\]]), чтобы получить список флажков с name="example[]", а затем вы можете использовать фильтр :checked, чтобы получить только выбранный флажок.

Затем вы можете использовать функцию .map для создания массива из выбранного флажка.

DEMO 

var output = $.map($(':checkbox[name=example\\[\\]]:checked'), function(n, i){
      return n.value;
}).join(',');
6 голосов
/ 07 марта 2012

В настоящее время не проверено, но я считаю, что должно работать следующее: 

var valuesArray = $('input:checkbox:checked').map( function () {
    return $(this).val();
}).get().join();

Отредактировано после небольшого перерыва для использования собственного DOM, а не $(this).val() (что слишком дорого в контексте): 

var valuesArray = $('input:checkbox:checked').map( function() {
    return this.value;
}).get().join(",");
3 голосов
/ 03 июня 2014 
var valuesArray = $('input[name="valuehere"]:checked').map(function () {  
        return this.value;
        }).get().join(",");

у меня работает всегда

0 голосов
/ 20 апреля 2019

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

https://www.tutsmake.com/jquery-multiple-checkbox-values-to-comma-separated-string/

    $(document).ready(function() {
        $(".btn_click").click(function(){
 
            var programming = $("input[name='programming']:checked").map(function() {
                return this.value;
            }).get().join(', ');
 
            alert("My favourite programming languages are: " + programming);
        });
    });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>
<body>
    <form>
        <h3>Select your favorite Programming Languages :</h3>
        <label><input type="checkbox" value="PHP" name="programming"> PHP</label>
        <label><input type="checkbox" value="Java" name="programming"> Java</label>
        <label><input type="checkbox" value="Ruby" name="programming"> Ruby</label>
        <label><input type="checkbox" value="Python" name="programming"> Python</label>
        <label><input type="checkbox" value="JavaScript" name="programming"> JavaScript</label>
        <label><input type="checkbox" value="Rust" name="programming">Rust</label>
        <label><input type="checkbox" value="C" name="programming"> C</label>
        <br>
        <button type="button" class="btn_click" style="margin-top: 10px;">Click here to Get Values</button>
    </form>
</body>
</html>
...