获取jQuery复选框值

要获取value属性的值，你可以这样做:

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

或者如果你设置了class或id，你可以:

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

然而，无论是否检查，都会返回相同值，这可能会令人困惑，因为它与提交的表单行为不同。

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

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

试试这个小方法:

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

或

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

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

这两种方法是有效的:

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

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

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

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

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

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

有些答案是误导或不准确的，请自己检查以下内容:

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

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

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

< br > < b >例子 # EYZ0 < / p >

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

没有jQuery:

只需选择元素并访问# EYZ0财产(它返回一个布尔值)。

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


alert(checkbox.checked);

<input type="checkbox"/>

Here is a quick example listening to the change event:

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

<input type="checkbox"/>

To select checked elements, use the :checked pseudo class (input[type="checkbox"]:checked).

Here is an example that iterates over checked input elements and returns a mapped array of the checked element's names.

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>

澄清一下:

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

将返回true或false

下面是如何获得所有选中的复选框作为数组的值:

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

简单但有效，并假设你知道会找到复选框:

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

# EYZ0 / # EYZ1

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

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

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

获取jquery中checked 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
});

在# EYZ0:

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

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

你也可以得到选定的文本$('input[name="line"]:checked').text()

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

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

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

这在我的情况下工作，任何人寻找一个简单的方法，必须尝试这个语法。 由于< / p >

对于多于一个复选框，总是使用命名数组，如下面的国家示例所示，你知道国家可以选择多个，所以我使用name="国家[]"而在检查复选框，你必须引用它的名字，如下面的例子所示

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>

如果只期望选择一个子元素:

form.querySelector(":checked").value