获取jQuery中的复选框值

Question

如何在jQuery中获取复选框的值？

Answer 1

要获取Value属性的值,您可以执行以下操作:

$("input[type='checkbox']").val();

或者,如果您设置了class或id为它,您可以:

$('#check_id').val();
$('.check_class').val();

但是,无论是否检查,这都将返回相同的值,这可能会造成混淆,因为它与提交的表单行为不同.

要检查是否已选中,请执行以下操作:

if ($('#check_id').is(":checked"))
{
  // it is checked
}

Answer 2

这两种方式正在发挥作用:

• $('#checkbox').prop('checked')
• $('#checkbox').is(':checked')(谢谢@mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

Answer 3

尝试这个小解决方案:

$("#some_id").attr("checked") ? 1 : 0;

要么

$("#some_id").attr("checked") || 0;

Answer 4

检索复选框值的唯一正确方法如下

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

正如jQuery网站上的官方文档中所解释的那样.其余的方法与复选框的属性无关,它们检查属性,这意味着它们在加载时测试复选框的初始状态.简而言之:

• 当你有元素,你知道这是一个复选框,你可以简单地通过读取其属性,你会不会需要jQuery的为(即elem.checked),也可以使用$(elem).prop("checked"),如果你想依靠jQuery的.
• 如果您需要知道(或比较)元素首次加载时的值(即默认值),正确的方法是$(elem).is(":checked").

答案有误导性,请自行检查以下内容:

http://api.jquery.com/prop/

Answer 5

只是澄清事情:

$('#checkbox_ID').is(":checked")

将返回'true'或'false'

Answer 6

$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();

Answer 7

jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });

Answer 8

简单但有效,并假设您知道将找到该复选框:

$("#some_id")[0].checked;

给true/false

Answer 9

//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey

示例
演示

Answer 10

$("input[name='gender']:checked").val();

这对我来说有效，任何寻找简单方法的人都必须尝试这种语法。谢谢

Answer 11

尽管这个问题是要求jQuery解决方案,但这是一个纯粹的JavaScript答案,因为没有人提到它.

没有jQuery:

只需选择元素并访问checked属性(返回一个布尔值).

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);

<input type="checkbox"/>

这是一个听取change事件的快速示例:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});

<input type="checkbox"/>

要选择已检查的元素,请使用:checked伪类(input[type="checkbox"]:checked).

下面是一个示例,它迭代已检查的input元素并返回已检查元素名称的映射数组.

这里的例子

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

Answer 12

您可以使用以下内容。经测试工作正常。

$('#checkbox_id').is(":checked"); // jQuery

如果checkbox选中，则会返回true，反之亦然。

下面的代码片段适用于任何尝试在 JavaScript 中执行相同操作的人。

document.getElementById("checkbox_id").checked //JavaScript

true如果checkbox被选中则返回