获取jQuery中的复选框值

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

#1楼

尝试这个小解决方案：

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

要么

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

#2楼

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

#3楼

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

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

#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/

#5楼

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

#6楼

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

例
演示

#7楼

尽管这个问题是要求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>

#8楼

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

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

或者，如果您为其设置了class或id ，则可以：

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

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

要检查是否已选中，请执行以下操作：

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

#9楼

只是澄清事情：

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

将返回'true'或'false'

#10楼

以下是如何将所有选中复选框的值作为数组获取：

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

#11楼

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

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

给出true / false

#12楼

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

#13楼

使用以下代码：

$('input[name^=CheckBoxInput]').val();

#14楼

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

#15楼

直到2018年的今天，由于api多年来的变化，才引起注意。 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);

来源：CSDN

作者：asdfgh0077

链接：https://blog.csdn.net/asdfgh0077/article/details/104060246

标签

jquery

复选框

checkbox选中事件

jquery事件

input