获取jQuery中的checkbox值

我怎样才能得到一个checkbox在jQuery中的价值?

要获得Value属性的值,可以这样做:

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

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

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

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

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

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

这两种方式正在工作:

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

试试这个小解决scheme:

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

要么

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

检索checkbox值的唯一正确方法如下

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

正如jQuery网站上的官方文档所解释的那样。 其余的方法与checkbox的属性无关,他们正在检查属性,这意味着他们正在testing加载时的checkbox的初始状态。 所以简而言之:

  • 当你有元素,你知道这是一个checkbox,你可以简单地阅读它的属性,你不会需要jQuery(即elem.checked ),或者你可以使用$(elem).prop("checked")如果你想依靠jQuery。
  • 如果您需要知道(或比较)元素第一次加载时的值(即默认值),则正确的方法是$(elem).is(":checked")

答案是误导性的,请自行检查下面的内容:

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

只是为了澄清事情:

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

将返回“真”或“假”

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

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

没有jQuery:

只需select元素并访问checked属性 (返回一个布尔值)。

 var checkbox = document.querySelector('input[type="checkbox"]'); alert(checkbox.checked); 
 <input type="checkbox"/> 
 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将被发现:

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

给出true / false

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


演示

以下是如何将所有选中的checkbox的值作为数组来获取:

 var values = (function() { var a = []; $(".checkboxes:checked").each(function() { a.push(this.value); }); return a; })() 
 <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> 

使用这个$('input [name ^ = CheckBoxInput]')。val();

HTML:

 <input type="checkbox" value="0" class="size"> <input type="checkbox" value="1" class="size"> 

jQuery的:

 $('.size').on('change',function(){ var size = $(this).val(); alert(size); }