在jQuery中获取复选框值


Answers:


1059

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

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

或者,如果您为其设置了classid,则可以:

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

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

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

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

3
如果页面上有多个复选框,第一个示例将做什么?顺便说一句,它可以写得更短一些$("input:checkbox")。此外,类选择器中似乎还有一个错字...
Jawa 2010年

1
@Jawa:第一个只是显示语法的示例,并感谢您的错字。
Sarfraz 2010年

136
如果我$($0).val()在Chrome浏览器中尝试并取消选中该复选框,则即使未选中该答案,它的答案也仍然是“打开”。但是$($0).is(":checked")返回正确的值。
Adrien

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"]在现代浏览器中的性能优于:checkbox
TrueWill

3
替换$('#check_id').val();$('#check_id').is(":checked");返回值true或false。
Matheus Miranda

227

这两种方式有效:

  • $('#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" />


9
.is('checked')不起作用,因为它应该是.is(':checked')
mgsloan 2014年

谢谢您的回答。这是jQuery prop()函数的最新答案
Thomas.Benz,

58

试试这个小解决方案:

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

要么

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

或!!($(“#some_id”)。attr(“ checked”))
COOLGAMETUBE

34

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

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/


.is(":checked")并使用.prop(":checked")jQuery 1.10.0为我使用相同功能
Josh

23

只是为了澄清一下事情:

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

将返回“ true”或“ false”



11
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);
    });

10

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

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

true/false


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

示例
演示


5

尽管这个问题要求使用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);


1
这不能回答问题。
Michael Cole

@MichaelCole-我只是重新读了这个问题(3年后),它看起来确实可以回答问题,所以请随意阐述。
Josh Crozier

1
“如何在jQuery中获取复选框的值?” ->“尽管这个问题要求使用jQuery解决方案……等等等等”。用其他实际答案的方式,这是一个肥皂盒式的答案,这就是为什么我对此表示反对。
Michael Cole

1
@MichaelCole-足够公平,反馈总是很感激。该答案的初衷是表明,当checked可以在本机DOM元素上方便地访问该属性时,在这种琐碎的情况下可以避免使用jQuery 。一些搜索此类问题/答案的人通常并不了解jQuery有时不是必需的事实。换句话说,头脑狭窄的人不是这个答案的目标人群。
乔什·克罗齐耶

2

这是如何获取所有选中的复选框的值作为数组的方法:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()

2

在以下位置获取选中的checkboxex的值jquery

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

pure js

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});


0
$('.class[value=3]').prop('checked', true);

1
问题是询问如何获取值,而不是如何检查具有特定默认值的内容。
昆汀,

0

最好的方法是 $('input[name="line"]:checked').val()

而且您还可以选择文本 $('input[name="line"]:checked').text()

将值属性和名称添加到单选按钮输入中。确保所有输入都具有相同的名称属性。

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>

-1
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>

-1

由于多年来的api变化,请注意,截止到2018年今天。removeAttr已被删除,不再可用!

jQuery选中或取消选中复选框:

不好,不能再工作了。

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

相反,您应该这样做:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.