jQuery 如何使用jquery获取多个复选框值

how to get multiple checkbox value using jquery

提问by user 007

How can I get the value of checkboxes which are selected using jquery? My html code is as follows:

如何获取使用 jquery 选择的复选框的值？我的html代码如下：

<input  id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input  id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input  id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input  id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />

回答by Juice

Try this

尝试这个

<input name="selector[]" id="ad_Checkbox1" class="ads_Checkbox" type="checkbox" value="1" />
<input name="selector[]" id="ad_Checkbox2" class="ads_Checkbox" type="checkbox" value="2" />
<input name="selector[]" id="ad_Checkbox3" class="ads_Checkbox" type="checkbox" value="3" />
<input name="selector[]" id="ad_Checkbox4" class="ads_Checkbox" type="checkbox" value="4" />
<input type="button" id="save_value" name="save_value" value="Save" />

function

功能

    $(function(){
      $('#save_value').click(function(){
        var val = [];
        $(':checkbox:checked').each(function(i){
          val[i] = $(this).val();
        });
      });
    });

回答by dugokontov

To get an array of values from multiple checked checkboxes, use jQuery map/get functions:

要从多个选中的复选框中获取一组值，请使用 jQuery map/get 函数：

$('input[type=checkbox]:checked').map(function(_, el) {
    return $(el).val();
}).get();

This will return array with checked values, like this one: ['1', '2']

这将返回带有检查值的数组，如下所示： ['1', '2']

Here is working example on jsfiddle: http://jsfiddle.net/7PV2e/

这是 jsfiddle 的工作示例：http: //jsfiddle.net/7PV2e/

回答by Adil

You can do it like this,

你可以这样做，

$('.ads_Checkbox:checked')

You can iterate through them with each()and fill the array with checkedbox values.

您可以遍历它们each()并使用复选框值填充数组。

Live Demo

现场演示

To get the values of selected checkboxes in array

获取数组中选定复选框的值

var i = 0;
$('#save_value').click(function () {
       var arr = [];
       $('.ads_Checkbox:checked').each(function () {
           arr[i++] = $(this).val();
       });      
});

Edit, using .map()

编辑，使用 .map()

You can also use jQuery.mapwith get()to get the array of selected checkboxe values.

您还可以使用jQuery.mapwithget()来获取选定复选框值的数组。

As a side note using this.valueinstead of $(this).val()would give better performance.

作为旁注，使用this.value而不是$(this).val()会提供更好的性能。

Live Demo

现场演示

$('#save_value').click(function(){
    var arr = $('.ads_Checkbox:checked').map(function(){
        return this.value;
    }).get();
}); 

回答by rahul

You can get them like this

你可以像这样得到它们

$('#save_value').click(function() {
    $('.ads_Checkbox:checked').each(function() {
        alert($(this).val());
    });
});

jsfiddle

提琴手

回答by Jonas Sciangula Street

$('input:checked').map(function(i, e) {return e.value}).toArray();

回答by blasteralfred Ψ

You may try;

你可以试试；

$('#save_value').click(function(){
    var final = '';
    $('.ads_Checkbox:checked').each(function(){        
        var values = $(this).val();
        final += values;
    });
    alert(final);
});

This will return all checkbox values in a single instance.

这将在单个实例中返回所有复选框值。

Hereis a working Live Demo.

这是一个有效的现场演示。

回答by Andriy Leshchuk

Also you can use $('input[name="selector[]"]').serialize();. It returns URL encoded string like: "selector%5B%5D=1&selector%5B%5D=3"

你也可以使用$('input[name="selector[]"]').serialize();. 它返回 URL 编码的字符串，如：“selector%5B%5D=1&selector%5B%5D=3”

回答by Maverick

Since u have the same class name against all check box, thus

由于您对所有复选框具有相同的类名，因此

   $(".ads_Checkbox") 

will give u all the checkboxes, and then you can iterate them using each loop like

会给你所有的复选框，然后你可以使用每个循环来迭代它们

$(".ads_Checkbox:checked").each(function(){
   alert($(this).val());
});

回答by Developer

Try this, jQuery how to get multiple checkbox's value

试试这个，jQuery 如何获取多个复选框的值

For Demo or more Example

对于演示或更多示例

    $(document).ready(function() {
        $(".btn_click").click(function(){
            var test = new Array();
            $("input[name='programming']:checked").each(function() {
                test.push($(this).val());
            });
 
            alert("My favourite programming languages are: " + test);
        });
    });

<!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>  

回答by Jakaria Muhammed Jakir

try this one.. (guys I am a new bee.. so if I wrong then I am really sorry. But I found a solution by this way.)

试试这个..（伙计们，我是一只新蜜蜂..所以如果我错了，那么我真的很抱歉。但我通过这种方式找到了解决方案。）

var suggestion = [];
$('#health_condition_name:checked').each(function (j, ob) {

    var odata = {
        health_condition_name: $(ob).val()
    };

    health.push(odata);
});