如何检查jQuery中是否选中了复选框？

checked复选框DOM元素的属性将为您提供元素的checked状态.

鉴于您现有的代码,您可以这样做:

if(document.getElementById('isAgeSelected').checked) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}

但是,有一个更漂亮的方法,使用toggle:

$('#isAgeSelected').click(function() {
$("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"/>
<div>Age is something</div>

• 我也尝试了上述条件,但它只返回false
• 这不是问题的答案.OP的要求是`this.checked`不是jQuery.此外,它仅在用户单击复选框时才有效,这不是问题的一部分.问题是,如何检查是否在jQuery中检查了一个复选框？在任何给定时间点击或不点击复选框和jQuery.
• $( "#txtAge")来回切换(this.checked); 与$("#txtAge").toggle()完全相同.因此,如果由于某种原因检查状态并隐藏下一个div(您在浏览器中单击了后退按钮) - 它将无法按预期工作.
• @Chiramisu - 如果你已经完全阅读了答案,你会注意到我的编辑不使用`is(':checked')`业务.
• 设置:$("#chkmyElement")[0] .checked = true; 得到:if($("#chkmyElement")[0] .checked)
• 请将答案的开头标记为旧解决方案,并在稍后提供更好的更新解决方案.否则有人可能只是从谷歌访问此页面,请参阅第一个代码块,并在他的项目中使用它.我知道人们*应该*阅读整个答案,但这只是没有无限时间的现实.
• @DCShannon:你觉得`this.checked`怎么样？
• @squint我认为它可能做的不是答案.我知道有一些无法解释的代码会切换复选框,无论其当前状态如何.
• @DCShannon:有些代码只是自我解释,但由于这是一个社区Wiki,我将添加一个明确的解释.但实际上这个答案中有关于检查复选框是否被检查的话.那些话是`th​​is.checked`.

使用jQuery的is()函数:

if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();  // checked
else
$("#txtAge").hide();  // unchecked

• 如果你不需要持续时间,缓和等,你可以使用`$("#txtAge").toggle($("#isAgeSelected").is(':checked'))`
• +1有不同的方式来获得检查财产.有些[在此处列出](http://goo.gl/GQEf56)
• @hvdd我知道 - 我说的是"财产",而不是选择器.
• A little bit cleaner solution would be `$("#txtAge").toggle($("#isAgeSelected").is(':checked'))`.

使用jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" checked="checked" />
// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

使用新属性方法:

if($('#checkMeOut').prop('checked')) {
// something when checked
} else {
// something else when not
}

• 我想知道为什么这不是答案...如果你正在使用jquery,那么`.prop`方法是检查道具的_designed_方法... ...如果你打算做`.is(":checked")`方法,那很好,但这不是用jquery做的设计方法.对？
• `.is(":checked")`和`.prop("checked")`都是在jQuery中获得相同结果的有效方法,`.is`适用于所有版本,`.prop`需要1.6+

jQuery 1.6+

$('#isAgeSelected').prop('checked')

jQuery 1.5及以下版本

$('#isAgeSelected').attr('checked')

任何版本的jQuery

// Assuming an event handler on a checkbox
if (this.checked)

所有的功劳都归功于西安.

• 从技术上讲,`this.checked`正在使用直接的Javascript.但我喜欢这个跨jQuery版本的答案!

我正在使用这个,这是完全正常的:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

注意:如果选中该复选框,则返回true,否则为undefined,因此最好检查"TRUE"值.

• 通过jquery 2.1.x它总是检查它是否默认被检查...我不知道这种行为是否是故意的,但它肯定不起作用(我猜这是一个bug)...... val()也不起作用,它保持"开启".prop()工作正常,dom.checked工作.
• 这是因为$("#checkkBoxId").attr("checked")返回"checked"或""(空字符串).而一个空字符串是假的,非空字符串是真的,请参阅truthy/falsy值http://docs.nodejitsu.com/articles/javascript-conventions/what-are-truthy-and-falsy-values

使用:

<input type="checkbox" name="planned_checked" checked> Planned
$("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});

    $("#planned_checked").change(function() {
if($(this).prop('checked')) {
alert("Checked Box Selected");
} else {
alert("Checked Box deselect");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked> Planned

从jQuery 1.6开始,行为发生jQuery.attr()了变化,鼓励用户不要使用它来检索元素的检查状态.相反,你应该使用jQuery.prop():

$("#txtAge").toggle(
$("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
// Return value changes with checkbox state
);

另外两种可能性是:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

这对我有用:

$get("isAgeSelected ").checked == true

isAgeSelected控件的id 在哪里.

另外,@ karim79的答案很好.我不确定在我测试时我错过了什么.

注意,这是答案使用Microsoft Ajax,而不是jQuery

• 在所有情况下，在所有常规编程语言中，都可以省略== true

如果您使用的是jquery的更新版本,则必须先找到.prop解决问题的方法:

$('#isAgeSelected').prop('checked')true如果选中并且false未选中则返回.我确认了,我之前遇到过这个问题.$('#isAgeSelected').attr('checked')并且$('#isAgeSelected').is('checked')正在返回undefined,这不是一个值得回答的情况.如下所示.

if($('#isAgeSelected').prop('checked')) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}

希望它有所帮助:) - 谢谢.

使用Clickcheckbox属性的事件处理程序是不可靠的,因为checked属性可以在事件处理程序本身的执行期间更改!

理想情况下,你会希望把你的代码放到一个change事件处理程序,例如它被激发每个复选框的值发生改变时(独立的如何它这样做).

$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});

• 从jQuery 1.7开始,[`.on()`](http://api.jquery.com/on/)方法是将事件处理程序附加到文档的首选方法.

使用:

<input type="checkbox" value="UDB">UDB
<input type="checkbox" value="Prasad">Prasad

$('input#abc').click(function(){
if($(this).is(':checked'))
{
var checkedOne=$(this).val()
alert(checkedOne);
// Do some other action
}
})

如果您希望只有在取消选中时才需要执行必要的操作,这可能会有所帮助.

您可以尝试使用changecheckbox 事件来跟踪:checked状态变化。

$("#isAgeSelected").on('change', function() {
if ($("#isAgeSelected").is(':checked'))
alert("checked");
else {
alert("unchecked");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<div>
Age is selected
</div>

我决定在没有jQuery的情况下发布关于如何做同样事情的答案.仅仅因为我是反叛者.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');
// Just because of IE <333
ageCheckbox.onchange = function() {
// Check if the checkbox is checked, and show/hide the text field.
ageInput.hidden = this.checked ? false : true;
};

首先,您可以通过ID获取这两个元素.然后为复选框的onchange事件分配一个函数,该函数检查是否选中了复选框并hidden适当地设置了年龄文本字段的属性.在该示例中使用三元运算符.

这是一个小提琴,你可以测试它.

附录

如果跨浏览器兼容性是一个问题,那么我建议将CSS display属性设置为none和inline.

elem.style.display = this.checked ? 'inline' : 'none';

较慢但跨浏览器兼容.

我相信你可以这样做:

if ($('#isAgeSelected :checked').size() > 0)
{
$("#txtAge").show();
} else {
$("#txtAge").hide();
}

我遇到了完全相同的问题.我有一个ASP.NET复选框

<asp:CheckBox CssClass='cssChkBox1' runat="server" />

在jQuery代码中,我使用以下选择器来检查是否选中了复选框,它似乎像魅力一样工作.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

我相信你也可以使用ID而不是CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

我希望这可以帮助你.

有很多方法可以检查是否选中了复选框:

使用jQuery检查的方法

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

检查示例或文档:

您可以使用此代码:

$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});

$('#isAgeSelected').click(function(){
console.log(this.checked);
if(this.checked == true) {
$("#txtAge").show();
} else {
$("#txtAge").hide();
}
});

这是做同样事情的一些不同方法:

$(document).ready(function (){
$('#isAgeSelected').click(function() {
// $("#txtAge").toggle(this.checked);
// Using a pure CSS selector
if ($(this.checked)) {
alert('on check 1');
};
// Using jQuery's is() method
if ($(this).is(':checked')) {
alert('on checked 2');
};
//  // Using jQuery's filter() method
if ($(this).filter(':checked')) {
alert('on checked 3');
};
});
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox"/>
<div>Age is something</div>

这对我有用:

/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){
$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

用这个:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

如果选中该复选框,则长度大于零.

我这样做的方法是:

if ( $("#checkbox:checked").length ) {
alert("checkbox is checked");
} else {
alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

true如果检查输入,则返回,false如果不是,则返回.

• 我理解为什么这可能在某些情况下有效,尽管它与`.attr('checked')`有相同的问题,因为它并不总是返回正确的状态.根据_Salman A_的[回答](http://stackoverflow.com/a/10350149/192886)(也许还有其他人),使用`.prop('checked')`代替它是一个更安全的选择.此外,还可以将`undefined`声明为`var undefined ='checked';`.

$(document).ready(function() {
$('#agecheckbox').click(function() {
if($(this).is(":checked"))
{
$('#agetextbox').show();
} else {
$('#agetextbox').hide();
}
});
});

您可以使用:

  if(document.getElementById('isAgeSelected').checked)
$("#txtAge").show();
else
$("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();

他们两个都应该工作.

1)如果您的HTML标记是:

<input type="checkbox"  />

attr使用:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

如果使用道具:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2)如果你的HTML标记是:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr使用:

$(element).attr("checked") // Will return checked whether it is checked="true"

使用的道具:

$(element).prop("checked") // Will return true whether checked="checked"

最佳答案并没有为我做到.这确实如此:

<script type="text/javascript">
$(document).ready(function(){
$("#li_13").click(function(){
if($("#agree").attr('checked')){
$("#saveForm").fadeIn();
}
else
{
$("#saveForm").fadeOut();
}
});
});
</script>

基本上,当单击元素#li_13时,它会检查是否使用该.attr('checked')函数检查元素#agree(这是复选框).如果它然后fadeIn #saveForm元素,如果不是fadeOut saveForm元素.

此示例适用于按钮.

请尝试以下方法:

<input type="button" value="Check All" />  &nbsp; <input type="button" value="Delete" /> <br/>
<input type="checkbox"  value="1" /> Checkbox  1 <br/>
<input type="checkbox"  value="2" /> Checkbox  2 <br/>
<input type="checkbox"  value="3" /> Checkbox  3 <br/>
$('#remove').attr('disabled', 'disabled');
$(document).ready(function() {
$('.cb-element').click(function() {
if($(this).prop('checked'))
{
$('#remove').attr('disabled', false);
}
else
{
$('#remove').attr('disabled', true);
}
});
$('.check:button').click(function()
{
var checked = !$(this).data('checked');
$('input:checkbox').prop('checked', checked);
$(this).data('checked', checked);
if(checked == true)
{
$(this).val('Uncheck All');
$('#remove').attr('disabled', false);
}
else if(checked == false)
{
$(this).val('Check All');
$('#remove').attr('disabled', true);
}
});
});

我用这个:

 <input type="checkbox" value="1" /> <br/>
<input type="textbox" />
$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

虽然你已经为你的问题提出了一个JavaScript解决方案(显示a textbox的checkbox时间checked),但这个问题可以通过css解决.使用此方法,您的表单适用于已禁用JavaScript的用户.

假设您有以下HTML:

<label for="show_textbox">Show Textbox</label>
<input type="checkbox" />
<input type="text" />

您可以使用以下CSS来实现所需的功能:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

对于其他场景,您可能会想到适当的CSS选择器.

这是一个演示这种方法的小提琴.

在单击时对选中或未选中的复选框进行操作。

$('#customCheck1').click(function() {
if (this.checked) {
console.log('checked');
} else {
console.log('un-checked');
}
});

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

编辑：if (boolean == true)虽然.checked属性也可能返回其他类型变量，但这不是一个很好的编程表达式。

最好.prop("checked")改用。它返回true且false仅。

切换:0/1否则

<input type="checkbox" />
<input
$('#nolunch').change(function () {
if ($(this).is(':checked')) {
$('#checklunch').val('1');
};
if ($(this).is(':checked') == false) {
$('#checklunch').val('0');
};
});

我确定这不是一些启示,但我没有在一个例子中看到它:

所有选中复选框的选择器(在页面上):

$('input[type=checkbox]:checked')

我认为这将是一个简单的

$('#isAgeSelected').change(function() {
if($(this).is(":checked")) {
$('#txtAge').show();
}
else{
$('#txtAge').hide();
}
});

包含本地文件系统中的jQuery.我使用了谷歌的CDN,还有很多可供选择的CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

只要mycheck单击类中的复选框,代码就会执行.如果选中当前单击的复选框,则会禁用所有其他复选框并启用当前复选框.如果未选中当前的那个,它将再次启用所有复选框以进行重新检查.

<script type="text/javascript">
$(document).ready(function() {
var checkbox_selector = '.mycheck input[type=checkbox]';
$(checkbox_selector).click(function() {
if ($($(this)).is(':checked')) {
// Disable all checkboxes
$(checkbox_selector).attr('disabled', 'disabled');
// Enable current one
$($(this)).removeAttr('disabled');
}
else {
// If unchecked open all checkbox
$(checkbox_selector).removeAttr('disabled');
}
});
});
</script>

简单的形式来测试

<form method="post" action="">
<div>
<input type="checkbox" value="1" /> Television
<input type="checkbox" value="2" /> Computer
<input type="checkbox" value="3" /> Laptop
<input type="checkbox" value="4" /> Camera
<input type="checkbox" value="5" /> Music Systems
</div>
</form>

输出屏幕:

if($("#checkkBoxId").is(':checked')){
alert("Checked=true");
}

要么

if($("#checkkBoxId").attr('checked') == true){
alert("checked=true");
}

我在Firefox 9.0.1中验证了以下内容可用于捕获复选框更改后的状态:

$("#mycheckbox").change(function() {
var value = $(this).prop("checked") ? 'true' : 'false';
alert(value);
});

checkedan 的属性input type="checkbox"与defaultChecked属性映射,而不是与checked属性映射.

因此,当在uncheked上选中复选框时在页面中执行某些操作时,请改用该prop()方法.它获取属性值并随着复选框状态的变化而更改.

在这些情况下使用attr()或getAttribute(在纯JavaScript中)并不是正确的做事方式.

如果elem是相关的复选框,然后做这样的事情来获取值:

elem.checked

要么

$(elem).prop('checked')

自动化

$(document).ready(function()
{
$('#isAgeSelected').change(function()
{
alert( 'value =' + $('#chkSelect').attr('checked') );
});
});

HTML

<b> <input type="isAgeSelected" /> Age Check </b>
<br/><br/>
<input type="button" value="check" />

jQuery的

$(document).ready(function()
{
$('#btnCheck').click(function()
{
var isChecked = $('#isAgeSelected').attr('checked');
if (isChecked == 'checked')
alert('check-box is checked');
else
alert('check-box is not checked');
})
});

阿贾克斯

function check()
{
if (isAgeSelected())
alert('check-box is checked');
else
alert('check-box is not checked');
}
function isAgeSelected()
{
return ($get("isAgeSelected").checked == true);
}

请尝试下面的代码来检查复选框是否被选中

$(document).ready(function(){
$("#isAgeSelected").on('change',function(){
if($("#isAgeSelected").is(':checked'))
$("#txtAge").show();  // checked
else{
$("#txtAge").hide();  // unchecked
}
});
});

这是我认为我需要有效执行此类操作的最少量代码.我发现这种方法很有用; 它返回一个选中的复选框数组,然后你可以使用它们的值(这个解决方案使用jQuery):

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
alert('Please select check boxes');
return false;
};
// And this is how you use them:
checkedBoxes.each(function() {
output +=  this.value + ", ";
};

打印"输出"将为您提供逗号分隔的值列表.

我遇到了同样的问题,并且没有任何发布的解决方案似乎工作,然后我发现这是因为ASP.NET将CheckBox控件呈现为内置INPUT的SPAN,因此CheckBox ID实际上是SPAN的ID,而不是INPUT,所以你应该使用:

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

然后上面列出的所有方法都应该有效.

这是一个示例,包括初始化 show/hide以匹配页面加载时复选框的状态; 考虑到firefox 在刷新页面时会记住复选框的状态这一事实,但不会记住显示/隐藏元素的状态.

$(function() {
// initialise visibility when page is loaded
$('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
// attach click handler to checkbox
$('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(在这个问题的其他答案的帮助下)

只需像下面一样使用它

 $('#isAgeSelected').change(function() {
if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
$('#txtAge').show();
} else {
$('#txtAge').hide();
}
});

使用纯JavaScript:

let checkbox = document.getElementById('checkboxID');
if(checkbox.checked) {
alert('is checked');
} else {
alert('not checked yet');
}

这是我的解决方法:

$('#vcGoButton').click(function () {
var buttonStatus = $('#vcChangeLocation').prop('checked');
console.log("Status is " + buttonStatus);
if (buttonStatus) {
var address = $('#vcNewLocation').val();
var cabNumber = $('#vcVehicleNumber').val();
$.get('postCabLocation.php',
{address: address, cabNumber: cabNumber},
function(data) {
console.log("Changed vehicle " + cabNumber + " location to " + address );
});
}
else {
console.log("VC go button clicked, but no location action");
}
});

使用:

$(this).toggle($("input:checkbox", $(this))[0].checked);

当您选择脱离上下文时,请记住您需要[0]才能访问该复选框.

二传手:

$("#chkmyElement")[0].checked = true;

消气:

if($("#chkmyElement")[0].checked) {
alert("enabled");
} else {
alert("disabled");
}

我实际上会优先考虑这个change事件.

$('#isAgeSelected').change(function() {
$("#txtAge").toggle(this.checked);
});

演示小提琴

试试这个,

$('#isAgeSelected').click(function() {
if(this.checked){
$("#txtAge").show();
} else{
$("#txtAge").hide();
}
});

选择器返回多个对象,它必须采用数组中的第一个项:

// Collection
var chckremember = $("#chckremember");
// Result boolen
var ischecked=chckremember[0].checked;

我正在使用jQuery 1.11.1,我也有设置和读取复选框值的麻烦.

我终于用这两个函数解决了它:

function setCheckboxValue(checkBoxId, checked) {
if (checkBoxId && (checked === true || checked === false)) {
var elem = $('#' + checkBoxId);
if (checked === true) {
elem.attr('checked', 'checked');
} else {
elem.removeAttr('checked');
}
}
}
function isChecked(checkBoxId) {
return $('#' + checkBoxId).attr('checked') != null;
}

它可能看起来有点脏,但它解决了我在不同类型的浏览器中遇到的所有有线问题.

if( undefined == $('#isAgeSelected').attr('checked') ) {
$("#txtAge").hide();
} else {
$("#txtAge").show();
}

您可以尝试以下代码：

嗨，您可以使用 plain Javascript，如下所示：

document.getElementById('checkboxOption').addEventListener('click',
event => console.log(event.target.checked)
);

<label><input type="checkbox">Check Option</label>