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


4548

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

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

但是以下代码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属性?


14
$('#isAgeSelected')返回集合,将其替换为:$('#isAgeSelected')[0] .checked
zamoldar

14
为什么不$('#isAgeSelected').checked
唐·钱德尔

1
对于一个全面的(正确)的回答,请参阅:stackoverflow.com/questions/426258/...
保罗Kenjora

12
由于jQuery选择器返回数组,因此您可以使用$('#isAgeSelected')[0].checked
FelipeLeão16年

2
对我来说,以下调整有效:将.attr('checked')替换为.is(':checked')
Mark N Hopgood,

Answers:


3432

如何成功查询选中的属性?

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


36
我也尝试过上述条件,但它仅返回false
Prasad

24
$(“#txtAge”)。toggle(this.checked); 与$(“#txtAge”)。toggle()完全相同。因此,如果由于某种原因检查了状态并且隐藏了下一个div(您在浏览器中单击了后退按钮),则它将无法按预期工作。
马克西姆六世。

23
@Chiramisu-如果您从头至尾都阅读了答案,您会发现我的编辑没有使用该is(':checked')业务。
karim79

8
设置:$(“#chkmyElement”)[0] .checked = true; 得到:if($(“#chkmyElement”)[0] .checked)
JJ_Coder4Hire

28
这不是问题的答案。this.checked不是jQuery,而是OP要求的。此外,它仅在用户单击复选框时才起作用,这不是问题的一部分。问题再次出现How to check whether a checkbox is checked in jQuery?在任何给定时间,无论是否单击复选框以及jQuery。
Marc Compte

1846

使用jQuery的is()函数:

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

19
如果您不需要持续时间,放松等,可以使用 $("#txtAge").toggle($("#isAgeSelected").is(':checked'))
naor 2013年

13
+1有多种获取属性的方法。这里列出了
user3199690

@NickG实际上jQuery 确实有一个:visible选择器
hvdd

2
我知道@hvdd-我说的是“属性”,而不是选择器。
NickG

@NickG ...我不明白你的意思。jQuery没有.visible“属性”(属性?您的意思是方法?),因为no HTML元素没有可见的属性。它们具有display 样式属性,它比打开/关闭要复杂一些。
xDaizu

566

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

使用新的属性方法:

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

27
我想知道为什么这不是答案...如果您完全使用jquery,则该.prop方法是检查道具的设计方法。.. ...如果您打算采用这种.is(":checked")方法,那很好,但是这并不是使用jquery的设计方法。对?
dsdsdsdsd 2013年

1
@dsdsdsdsd大概是因为它还需要另一个向后兼容的步骤(我现在正面临着同样的问题)。
user98085 2014年

18
.is(":checked")并且.prop("checked")都是在jQuery中获得相同结果的有效方法,.is将适用于所有版本,.prop要求
1.6+

如果.attr('checked')在jQuery 1.11.3中使用.prop('checked'),则将得到未定义;如果使用,则将得到true / false。我看不到为什么当较旧的浏览器无法支持引入的.prop()并因此需要的更高版本的jQuery时,为什么将它们更改为以这种方式工作.attr()。唯一的好处是,较旧的浏览器(即IE 8)无法支持jQuery 1.9以上的任何版本。希望他们.attr('checked')在那个版本中没有这样做(make = undefined)!幸运的是,总有this.checked
vapcguy 2015年

230

jQuery 1.6以上

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

jQuery 1.5及以下

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

任何版本的jQuery

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

一切归功于西安


8
从技术上讲,this.checked是使用纯Javascript。但我喜欢跨jQuery版本的答案!
vapcguy 2015年

170

我正在使用此,这绝对正常:

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

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


6
之所以有效,是因为$(“#checkkBoxId”)。attr(“ checked”)返回“ checked”或“”(空字符串)。和一个空字符串falsy,非空字符串是truthy,看到truthy / falsy值docs.nodejitsu.com/articles/javascript-conventions/...
阿德里安成为

7
通过jquery 2.1.x,它会始终检查默认情况下是否被检查了……我不知道这种行为是否是故意的,但它肯定无法正常工作(我想这是一个错误)……val()也不起作用,它保持“打开”状态。该prop()正常工作,并且dom.checked也可以工作。
inf3rno 2014年

1
当您必须使用.attr()!支持较旧的浏览器时,问题就来了!如果只是他们一个人呆得足够好……。在这里找到另一个答案,说您可以将其this.checked用于跨jQuery解决方案,因为它基本上只是Javascript。
vapcguy 2015年

.attr('checked')将测试默认情况下是否选中它。因为它正在检查html 属性,而不是当前状态。以前的版本是一个错误(尽管我猜想是一个被利用很多的错误)。
杰伊·欧文

149

采用:

<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


119

从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")

和$(“#txtAge”)[0] .checked
Yevgeniy Afanasyev

101

这为我工作:

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

isAgeSelected控件的ID 在哪里。

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

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


4
在所有情况下,在所有常规编程语言中,您都可以忽略== true
RedPixel

@RedPixel除非您正在处理可为空的类型。:)(令人讨厌的笑脸)
科洛布峡谷

88

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

$('#isAgeSelected').prop('checked')true如果选中和false未选中,将返回。我确认了这一点,并且较早地遇到了这个问题。$('#isAgeSelected').attr('checked')并且$('#isAgeSelected').is('checked')正在返回undefined,这对于这种情况不是一个值得的答案。因此,请执行以下操作。

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

希望对您有所帮助:)-谢谢。


为什么不$('#isAgeSelected').checked呢?
Don Cheadle

1
使用.is是否需要冒号$('#isAgeSelected')。is(':checked')
Patrick

62

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

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

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

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

3
从jQuery 1.7开始,该.on()方法是将事件处理程序附加到文档的首选方法。
2013年

61

采用:

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

如果您希望仅在选中此框时才需要执行所需的操作,而不是在删除该复选框时才可以这样做,则可以提供帮助。


53

我决定发布一个答案,说明如何在没有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属性设置为noneinline

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

较慢但跨浏览器兼容。


好吧,.hidden虽然我喜欢这种解决方案,但是浏览器不是很不错:)
Florian Margaine 2012年

确实是最好的使用方法style。但是,这很不幸,因为.hidden性能要好得多
Florian Margaine 2012年

条件运算符中的赋值?法律,是的。但是,这不是我所谓的好风格。
Jules 2012年

可以简化为:ageInput.hidden =!已检查;(我讨厌当人们不必要地使用布尔文字时……如果您在同一简单语句中同时使用“ true”和“ false”,则可能不必要使用其中任何一个)
JoelFan 2015年

52

我相信您可以这样做:

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

alert($('input [name = isAgeSelected]')。attr('checked')); 上面的代码根据检查结果显示是/否。之前的尝试有任何问题
普拉萨德

Prasad,您是按名称还是ID引用复选框?我现在很困惑……
karim79,2009年

你不能给它一个ID吗?事情会容易得多,在您的示例中,通过ID对其进行了寻址

从jQuery 1.8开始不推荐使用.size()方法。请改用.length(不带();-)属性!也许您必须将“ #isAgeSelected:checked”放在一起。
弗朗索瓦·布雷顿

47

我遇到了完全相同的问题。我有一个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 { ... }

我希望这可以帮助你。



46

此代码将帮助您

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

42

这对我有用:

/* isAgeSelected being id for checkbox */

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

41

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

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


35

用这个:

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

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


33

我的方法是:

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

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

true如果输入被选中,false则返回该值。


4
我了解为什么这在某些情况下可能会起作用,尽管它有一个问题.attr('checked'),即它并不总是返回正确的状态。根据Salman A答案(可能还有其他答案),使用它是一个更安全的选择.prop('checked')。此外,也可以声明undefinedvar undefined = 'checked';
WynandB

.prop('checked')现在似乎确实是一个更好的答案。它在编写时还不那么可靠。我不理解,也不认为重新声明未定义是个好主意。
fe_lix_

附带说明一下,使用typeof (x) !== "undefined"
naor 2013年

在那种情况下,我相信使用!==更准确,更容易阅读。仅在测试过去可能已定义或未定义的变量时,才使用typeof(x)。
fe_lix_13年

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

30

您可以使用:

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

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

他们两个都应该工作。


27

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"

这是一个真正的问题。我的解决方法-将更改事件添加到输入:<input type =“ checkbox” onchange =“ ChangeChkBox()” />,然后使用该事件更改布尔JavaScript变量,并使用JavaScript变量而不是直接查询复选框。
Graham Laight

24

此示例用于按钮。

尝试以下方法:

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

24

最重要的答案对我没有帮助。虽然这样做:

<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')功能检查是否已选中元素#同意(即复选框)。如果是,则淡入#saveForm元素;如果不是,则淡出saveForm元素。


22

我正在使用这个:

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

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

22

虽然你提出你的问题的一个JavaScript解决方案(显示textboxcheckboxchecked),这个问题可以解决只是CSS。通过这种方法,您的表单适用于禁用JavaScript的用户。

假设您具有以下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选择器。

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


21

切换: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');
    };
});

19

我认为这将是简单的

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.