在jQuery中获取复选框值答案

【问题标题】：Get checkbox value in jQuery在jQuery中获取复选框值
【发布时间】：2011-02-19 12:46:33
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

或者如果你已经为它设置了class或id，你可以：

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

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

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

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

【讨论】：

如果我在 Chrome 中尝试 $($0).val() 并取消勾选复选框，即使没有勾选，答案也是“on”。但$($0).is(":checked") 返回正确的值。

【解决方案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" />

【讨论】：

【解决方案3】：

试试这个小解决方案：

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

或

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

【讨论】：

或者 !!($("#some_id").attr("checked"))

【解决方案4】：

检索复选框值的最佳方法如下

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

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

当你拥有元素并且你知道它是一个复选框时，你可以简单地读取它的属性并且你不需要 jQuery（即elem.checked）或者如果你想依赖 jQuery，你可以使用$(elem).prop("checked") .
如果您需要知道（或比较）元素首次加载时的值（即默认值），正确的做法是elem.getAttribute("checked") 或elem.prop("defaultChecked")。

请注意，elem.attr("checked") 仅在 jQuery 1.6.1+ 版本之后修改，返回与elem.prop("checked") 相同的结果。

有些答案具有误导性或不准确，请自行检查以下内容：

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

【讨论】：

.is(":checked") 和 .prop(":checked") 对我来说与 jQuery 1.10.0 相同
@Josh，你说得对，谢谢！我更新了答案以澄清未来的读者。

【解决方案5】：

只是为了澄清一些事情：

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

将返回“真”或“假”

【讨论】：

【解决方案6】：

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

【讨论】：

不起作用。在检查 ':checked' 之前你可能需要一列
.val() 不起作用。无论是否选中，都返回“on”。
$('#checkbox_id').is(":checked"); 返回一个布尔值，正是我所需要的。

【解决方案7】：

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

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

给true/false

【讨论】：

【解决方案8】：

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

示例
Demo

【讨论】：

【解决方案9】：

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

尽管这个问题要求 jQuery 解决方案，但这里是一个纯 JavaScript 答案，因为没有人提到它。

没有 jQuery：

只需选择元素并访问checked property（它返回一个布尔值）。

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

alert(checkbox.checked);

&lt;input type="checkbox"/&gt;

这是一个监听change 事件的简单示例：

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

&lt;input type="checkbox"/&gt;

要选择选中的元素，请使用:checked pseudo class (input[type="checkbox"]:checked)。

这是一个迭代检查的 input 元素并返回检查元素名称的映射数组的示例。

Example Here

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>

【讨论】：

【解决方案11】：

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

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

【讨论】：

【解决方案12】：

使用以下代码：

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

【讨论】：

【解决方案13】：

在jquery中获取checkboxex的值：

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

【讨论】：

【解决方案14】：

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

【讨论】：

问题是问如何获取值而不是如何检查具有特定默认值的东西。

【解决方案15】：

最好的方法是$('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>

【讨论】：

【解决方案16】：

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

这在我的情况下有效，任何寻找简单方法的人都必须尝试这种语法。谢谢

【讨论】：

【解决方案17】：

对于超过 1 个复选框，请始终使用命名数组，如下面的国家/地区示例所示，因为您知道可以选择多个国家/地区，所以我使用 name="countries[]" 并且在检查复选框时，您必须按名称引用它如下例所示

var selectedCountries = ["Pakistan", "USA"];

$(document).ready(function () {
  $.each(selectedCountries, function (index, country) {
    $(`input[name='countries[]'][value='${country}']`).attr('checked', 'checked');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>
  <input type="checkbox" name="countries[]" value="Pakistan">
  Pakistan
</p>
<p>
  <input type="checkbox" name="countries[]" value="India">
  India
</p>
<p>
  <input type="checkbox" name="countries[]" value="USA">
  USA
</p>

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

请注意，截至今天，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);

【讨论】：