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

How do I check whether a checkbox is checked in jQuery?

提问人: 提问时间:5/23/2009 最后编辑:27 revs, 20 users 21%Prasad 更新时间:9/5/2023 访问量:4808276

问:

我需要检查复选框的属性,并使用jQuery根据选中的属性执行操作。checked

例如,如果选中复选框,那么我需要显示一个文本框来输入,否则隐藏文本框。ageage

但默认情况下返回以下代码:false

if ($('#isAgeSelected').attr('checked')) {
  $("#txtAge").show();
} else {
  $("#txtAge").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">
  Age is selected
</div>

如何成功查询属性?checked

JavaScript jQuery HTML 复选框

评论

6赞 RBT 2/13/2016
从 jquery 1.6 开始,属性和属性的处理方式发生了重大变化。对于您的情况,以下应该有效: if($('#isAgeSelected').prop(“checked”)) { $(“#txtAge”).show(); else { $(“#txtAge”).hide();if 语句中的条件将仅返回 true 或 false,具体取决于复选框的选中/未选中状态。有关详细信息,请参阅链接上的属性与属性部分。
3赞 Liam 5/13/2022
这回答了你的问题吗?如何检查复选框是否被选中?

答:

3668赞 11 revs, 9 users 36%karim79 #1

如何成功查询已检查的属性?

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

因此,在给定现有代码的情况下,可以执行以下操作:

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" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

评论

145赞 Marc Compte 7/6/2017
这不是问题的答案。 不是 OP 要求的 jQuery。此外,它仅在用户单击复选框时才有效,这不是问题的一部分。同样,问题是,在任何给定时间,无论是否单击复选框和在jQuery中。this.checkedHow to check whether a checkbox is checked in jQuery?
1赞 Andy 8/5/2022
“不是jQuery”怎么会是一个参数?这种态度是相当有害的,这也是为什么现在很难摆脱jQuery的原因!如果你能使用很久以前的普通 JavaScript,它无处不在,使用起来并不复杂,编写时间也不长,你绝对应该这样做。
0赞 John Lord 9/8/2022
不仅如此,jquery 还是一个 javascript 扩展,因此包含所有 javascript。.无论如何,“this”是一个jquery对象,所以他无论如何都是完全错误的。
2赞 Adriano Varoli Piazza 5/3/2023
“'不是jquery'怎么会是一个论点?”因为,虽然你确实可以在同一个脚本上同时使用 jquery 和普通 js,但如果你使用一种编码风格而不是两种编码风格,它会更具可读性。如果你已经接受了jquery的权衡,你也可以使用它。
0赞 John Lord 9/16/2023
人们不只在jquery中编码。你不能。无论如何,jquery不是一种语言。它是一个库,你只需要专门查看复选框的代码,就会发现程序员无法决定如何设置/取消设置一个简单的通用控件。我刚刚完成了我们网站的一个页面的修复,因为jquery版本发生了变化,attr不再适用于复选框。JavaScript 没有这个问题,我们在项目中拥有 jQuery 的唯一原因是我们的 Kendo 库需要它。
62赞 xenon #2

我相信你可以这样做:

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

评论

0赞 Kevin Dark 10/14/2021
这是仅选择那些首先被选中的那些的最佳答案。$('#isAgeSelected :检查')
116赞 6 revs, 4 users 62%Prasad #3

这对我有用:

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

其中 是控件的 ID。isAgeSelected

此外,@karim79的答案很好用。我不确定我在测试它时错过了什么。

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

评论

4赞 Kemuel Sanchez 9/8/2021
该问题特别要求jQuery解决方案。
0赞 Michael Peterson 12/3/2022
对于专门询问jQuery的问题没有有用的信息。
193赞 3 revs, 3 users 71%Pradeep #4

我正在使用它,这工作绝对正常:

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

注意:如果选中该复选框,它将返回 true,否则未定义,因此最好检查“TRUE”值。

评论

0赞 sergiol 12/2/2022
attr对我来说没有定义,但似乎工作正常。prop
13赞 tsw_mik #5

我遇到了同样的问题,并且发布的解决方案似乎都不起作用,然后我发现这是因为 ASP.NET CheckBox 控件呈现为内部带有 INPUT 的 SPAN,因此 CheckBox ID 实际上是 SPAN 的 ID,而不是 INPUT,因此您应该使用:

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

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

64赞 Nertim #6

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

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

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

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

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

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

我希望这对你有所帮助。

评论

0赞 Kemuel Sanchez 9/8/2021
您可以使用 CSS 类,只要您记住 CSS 类并不是唯一的。如果您想响应单个元素中的更改,那么 ID 将是首选方法。
57赞 3 revs, 3 users 60%ashish amatya #7

这对我有用:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
13赞 Tim Abell #8

以下示例包括初始化显示/隐藏以匹配页面加载时复选框的状态;考虑到当您刷新页面时,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);})
});

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

2244赞 4 revs, 3 users 72%Bhanu Krishnan #9

使用 jQuery 的 is() 函数:

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

评论

9赞 Kai Neuwerth 1/6/2021
更干净一点的解决方案是 .$("#txtAge").toggle($("#isAgeSelected").is(':checked'))
10赞 Jean-Roch B. 3/31/2022
@KaiNeuwerth IMO 来说,它并不干净,只是更短。
0赞 Prince 11/27/2022
f($(“#isAgeSelected”).is(':checked'))
649赞 SeanDowney #10

使用 jQuery > 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

使用 new 属性方法:

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

评论

1赞 TheStoryCoder 11/26/2021
如果您像几个框架那样在复选框旁边有一个复选框,以便始终提交一个值,则不起作用。 另一方面,在这种情况下有效。<input type="hidden" value="0" name="checkMeOut">.is(':checked')
70赞 2 revs, 2 users 75%arviman #11

对 checkbox 属性使用事件处理程序是不可靠的,因为在执行事件处理程序本身的过程中,该属性可能会更改!Clickchecked

理想情况下,您希望将代码放入事件处理程序中,例如每次更改复选框的值时都会触发该处理程序(与更改方式无关)。change

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});
39赞 2 revs, 2 users 80%Dalius I #12

我的做法是:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
19赞 Joshua Harris #13

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

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});
36赞 fe_lix_ #14
$(selector).attr('checked') !== undefined

如果输入已选中,如果未选中,则返回此值。truefalse

62赞 Octavian Helm #15

我决定发布一个关于如何在没有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 获取这两个元素。然后,为复选框的事件分配一个函数,该函数检查复选框是否被选中,并相应地设置年龄文本字段的属性。在该示例中,使用三元运算符。onchangehidden

这里有一把小提琴供您测试。

补遗

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

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

速度较慢,但跨浏览器兼容。

135赞 3 revs, 2 users 81%Salman A #16

从 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")
28赞 4 revs, 2 users 72%BigHomie #17

最好的答案没有为我做。不过,这确实做到了:

<script type="text/javascript">
    $(document).ready(function(){

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

基本上,当单击元素 #li_13 时,它会使用该函数检查元素 # 同意(即复选框)。如果是,则 fadeIn 为 #saveForm 元素,如果不是,则为 saveForm 元素。.attr('checked')

2赞 Abdul Hamid #18
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
6赞 3 revs, 3 users 62%user1996628 #19
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}

评论

0赞 Adriaan 3/22/2022
请阅读如何回答,并永远记住,您不仅仅是在解决手头的问题,而且还在教育 OP 和任何未来的读者这个问题和答案。因此,请编辑答案以解释其工作原理。
9赞 2 revs, 2 users 56%Peter Mortensen #20

用:

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

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

10赞 3 revs, 3 users 52%cauleyfj #21

这是我的解决方法:

$('#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");
    }
});
17赞 2 revs, 2 users 69%Madan Sapkota #22

包括本地文件系统中的 jQuery。我用的是谷歌的CDN,也有很多CDN可供选择。

<script src="//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 class="mycheck">
        <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>

输出画面:

Enter image description here

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

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}
14赞 2 revs, 2 users 70%Daryl H #24

这是我认为我需要的最小代码量,可以有效地完成这样的事情。我发现这种方法很有用;它返回一个被选中的复选框数组,然后您可以使用它们的值(此解决方案使用 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 + ", ";
};

打印“output”将为您提供一个逗号分隔的值列表。

112赞 3 revs, 2 users 95%Rajesh Omanakuttan #25

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

$('#isAgeSelected').prop('checked')如果选中,如果未选中,将返回。我确认了这一点,我之前遇到了这个问题。 并且正在返回,这对这种情况来说不是一个有价值的答案。所以按照下面给出的去做。truefalse$('#isAgeSelected').attr('checked')$('#isAgeSelected').is('checked')undefined

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}
27赞 2 revs, 2 users 71%Nishant #26

我正在使用这个:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
76赞 3 revs, 3 users 81%UDB #27

用:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

如果您希望仅在选中该框时执行所需的操作,而不是在删除选中时执行所需的操作,这将有所帮助。

15赞 2 revs, 2 users 92%subham.saha1004 #28

的属性与属性映射,而不是与属性映射。checkedinput type="checkbox"defaultCheckedchecked

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

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

如果是 Concerned 复选框,则执行如下操作来获取值:elem

elem.checked

$(elem).prop('checked')
32赞 3 revs, 3 users 77%Somnath Kharat #29

1) 如果您的 HTML 标记是:

<input type="checkbox"  />

使用属性:

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

如果使用 prop:

$(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"

使用属性:

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

使用的道具:

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

评论

0赞 Graham Laight 5/10/2016
这是一个真正的问题。我的解决方法 - 在输入中添加一个更改事件:<input type=“checkbox” onchange=“ChangeChkBox()” />然后使用该事件更改布尔 JavaScript 变量,并使用 JavaScript 变量而不是直接查询复选框。
20赞 2 revs, 2 users 67%Tsonev #30

我敢肯定这不是什么启示,但我没有在一个例子中看到这一切:

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

$('input[type=checkbox]:checked')
28赞 2 revs, 2 users 97%usayee #31

此示例适用于按钮。

请尝试以下操作:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  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);
    }
});
});
10赞 JJ_Coder4Hire #32

二传手:

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

吸气剂:

if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}
15赞 2 revs, 2 users 88%Khaled.K #33

自动化

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

[HTML全文]

<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>

<br/><br/>

<input type="button" id="btnCheck" 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);
}
273赞 4 revs, 3 users 81%ungalcrys #34

j查询 1.6+

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

jQuery 1.5 及更低版本

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

任何版本的 jQuery

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

所有的功劳都归功于西安

评论

12赞 vapcguy 6/20/2015
从技术上讲,是使用直接的 Javascript。但我喜欢那个跨jQuery版本的答案!this.checked
1赞 TheStoryCoder 11/26/2021
如果您像几个框架那样在复选框旁边有一个复选框,以便始终提交一个值,则不起作用。 另一方面,在这种情况下有效。<input type="hidden" value="0" name="checkMeOut">.is(':checked')
8赞 2 revs, 2 users 75%Tarion #35

我实际上更喜欢这个活动。change

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

演示小提琴

54赞 2 revs, 2 users 78%Parth Chavda #36

有许多方法可以检查复选框是否被选中:

使用jQuery进行检查的方法

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

检查示例或文档:

1赞 NoWar #37

如果您需要使用CSS类作为jQuery选择器,您可以执行以下操作:

$(document).ready(function () {
        $('.myOptionCheckbox').change(function () {            
            if ($(this).prop('checked') == true) {
                console.log("checked");           
            }
            else {
                console.log("unchecked");                
            }
        });
    });

它也适用于。checkboxesradioboxes

34赞 3 revs, 2 users 78%Jumper Pot #38
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});
-1赞 2 revs, 2 users 67%Sudha #39

$("#isAgeSelected").prop('checked', true);

评论

3赞 bronze man 4/3/2015
此代码可以将复选框设置为选中状态。我不认为这个答案是相对于问题而言的。
24赞 2 revs, 2 users 96%user2385302 #40

切换:0/1 否则

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});
8赞 2 revs, 2 users 70%zamoldar #41

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

// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;
1赞 4 revs, 3 users 70%Ferhat KOÇER #42

此功能是替代且稳定的:

$('#isAgeSelected').context.checked
(return True/False)

例:

if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
    /*.....*/
}else{
    /*.....*/
}
23赞 Jitendra Damor #43

我认为这将很简单

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
1赞 3 revs, 2 users 75%argie cruz #44
$('#chk').change(function() { 
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');
2赞 Vajira Lasantha #45

对于旧版本的jQuery,我不得不使用以下内容,

$('#change_plan').live('click', function() {
     var checked = $('#change_plan').attr('checked');
     if(checked) {
          //Code       
     }
     else {
          //Code       
     }
});
28赞 4 revs, 2 users 88%Ormoz #46

尽管您已经为您的问题提出了一个 JavaScript 解决方案(当 a is 时显示 a),但这个问题可以通过 css 来解决。使用这种方法,您的表单适用于已禁用 JavaScript 的用户。textboxcheckboxchecked

假设您有以下 HTML:

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

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

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

对于其他情况,您可以考虑适当的 CSS 选择器。

这里有一个小提琴来演示这种方法

50赞 2 revs, 2 users 79%Sangeet Shah #47

这是执行相同操作的一些不同方法:

$(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" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

8赞 Mohammed Safeer #48

试试这个,

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

评论

0赞 Adriaan 3/22/2022
请阅读如何回答,并永远记住,您不仅仅是在解决手头的问题,而且还在教育 OP 和任何未来的读者这个问题和答案。因此,请编辑答案以解释其工作原理。
35赞 2 revs, 2 users 97%Muhammad Awais #49

您可以使用:

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

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

他们俩都应该工作。

0赞 2 revs, 2 users 65%Matt S #50
if($('#isAgeSelected').prop('checked')) {
    // do your action 
}
44赞 3 revs, 3 users 55%Hamid N K #51

使用这个:

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

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

178赞 4 revs, 4 users 39%Lalji Dhameliya #52

用:

<input type="checkbox" name="planned_checked" checked id="planned_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 id="planned_checked"> Planned

4赞 Iter Ator #53

这个解决方案呢?

$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();

评论

0赞 Adriaan 3/22/2022
请阅读如何回答,并永远记住,您不仅仅是在解决手头的问题,而且还在教育 OP 和任何未来的读者这个问题和答案。因此,请编辑答案以解释其工作原理。
60赞 5 revs, 2 users 91%sandeep kumar #54

此代码将对您有所帮助

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

我正在使用 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;
}

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

13赞 2 revs, 2 users 69%Himanshu Upadhyay #56

只需像下面这样使用它

 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });
3赞 2 revs, 2 users 89%Ir Calif #57

如果您需要知道复选框是否在纯选中,则应使用此代码。javascript

let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
    alert("element is checked");
} else {
    alert("element is  ot checked");
}
4赞 2 revssedhal soni #58

我需要检查复选框的 checked 属性,并使用 jQuery 根据 checked 属性执行操作。

E.X公司 -

1)如果选中年龄复选框,则在负载上运行以获取复选框值,那么我需要显示一个文本框来输入年龄,否则隐藏文本框。

2)如果选中了年龄复选框,那么我需要显示一个文本框来输入年龄,否则使用复选框的单击事件隐藏文本框。

所以代码默认不返回 false:

请尝试以下操作:

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) {
                $('#Age').show();
            } else {
                $('#Age').hide();
            }   
            $('#isAge').click(function() {
                if(document.getElementById('isAge').checked) {
                    $('#Age').show();
                } else {
                    $('#Age').hide();
                }
            }); 
            </script>
        </body>
    </html>

这是一个修改后的版本:https://jsfiddle.net/sedhal/0hygLtrz/7/

14赞 3 revs, 2 users 94%Carlos Abraham #59

使用纯 JavaScript

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
7赞 Praneeth Madush #60

你可以试试这段代码:

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

评论

0赞 Adriaan 3/22/2022
请阅读如何回答,并永远记住,您不仅仅是在解决手头的问题,而且还在教育 OP 和任何未来的读者这个问题和答案。因此,请编辑答案以解释其工作原理。
23赞 2 revs, 2 users 77%Javed Khan #61

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

$(document).ready(function(){

    $("#isAgeSelected").on('change',function(){

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

   });

});
4赞 Kamil Kiełczewski #62

在纯js中,复选框状态更易于阅读

isAgeSelected.checked

function check() {
  txtAge.style.display= isAgeSelected.checked ? 'block':'none';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Age <input type="checkbox" id="isAgeSelected"/>

<button onclick="check()">Check</button>

<div id="txtAge" style="display:none">
Age is selected
</div>

72赞 2 revs, 2 users 55%kabirbaidhya #63

您可以尝试使用复选框事件来跟踪状态更改。change: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" id="isAgeSelected" />
<div id="txtAge" style="display:none">
  Age is selected
</div>

29赞 5 revs, 4 users 44%Dan Walters #64

对单击时选中或取消选中的复选框执行操作。

$('#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" id="customCheck1">

编辑:不是一个很好的编程表达式,尽管属性也可能返回其他类型变量。if (boolean == true).checked

最好改用。它返回 并且 only。.prop("checked")truefalse

评论

0赞 Anupam 10/14/2021
请注意,这不适用于此处概述的 Jquery 对象这将起作用(即this.checked$(this).is(":checked"))
5赞 rcoro #65

嗨,您可以使用普通,如下所示:Javascript

document.getElementById('checkboxOption').addEventListener('click',      
   event => console.log(event.target.checked)
);
<label><input type="checkbox" id="checkboxOption">Check Option</label>

评论

0赞 Adriaan 3/22/2022
请阅读如何回答,并永远记住,您不仅仅是在解决手头的问题,而且还在教育 OP 和任何未来的读者这个问题和答案。因此,请编辑答案以解释其工作原理。
15赞 2 revs, 2 users 87%sarvesh Dineshkumar Patel #66

$(document).on("click","#isAgeSelected",function(){
  if($(this).prop("checked") == true){
    $("#txtAge").show();
  }
  else if($(this).prop("checked") == false){
    $("#txtAge").hide();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <input type="checkbox" id="isAgeSelected"/>

<div id="txtAge" style="display:none">
<input type="text" name="age" placeholder="Please enter age" />
</div>

6赞 Sanket Thakkar #67
$(document).on('change', '#isAgeSelected', function() {

    if($(this).is(":checked")){

       $('#txtAge').hide();
    }
    else
    {
        $('#txtAge').hide();
    }
});
3赞 Du-Lacoste #68

您可以通过两种方式尝试以下方法:

var getVal=$('#isAgeSelected').is(":checked"); // jQuery

var getVal=document.getElementById("isAgeSelected").checked //JavaScript

if (getVal==true) {
 $("#txtAge").show();  // checked
} else {
 $("#txtAge").hide();  // unchecked
}