如何在jQuery中获取复选框值?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (111)

如何在jQuery中获得复选框的值?

提问于
用户回答回答于

要获得value属性的值,可以执行如下操作:

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

或者如果你设置了classid为此你可以:

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

但是,这将返回same值,无论是否选中,这可能会使人感到困惑,因为它与提交的表单行为不同。

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

if ($('#check_id').is(":checked"))
{
  // it is checked
}
用户回答回答于
//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
用户回答回答于

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

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

函数数值true/false

用户回答回答于

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

没有jQuery:

只需选择元素并访问checkedproperty。

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

若要选择选中的元素,请使用:checkedpseudo class 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>
用户回答回答于
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);
    });
用户回答回答于
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
用户回答回答于

只是为了澄清一些事情:

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

将返回“真”或“假”

用户回答回答于

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

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

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

  • 当你拥有元素并且知道它是一个复选框时,你可以简单地读取它的属性,并且不需要jQuery(即elem.checked)或者你可以使用$(elem).prop("checked")如果你想依赖jQuery。
  • 如果你需要知道(或比较)元素第一次加载时的值(即默认值),那么正确的方法是$(elem).is(":checked")...

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

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

用户回答回答于

试试这个小解决方案:

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

$("#some_id").attr("checked") || 0;
用户回答回答于

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

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')
$('#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" />

扫码关注云+社区

领取腾讯云代金券