本文共 7470 字，大约阅读时间需要 24 分钟。

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

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

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

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

  
     
       Age is selected 
     

如何成功查询checked属性？

#1楼

从jQuery 1.6开始， 的行为已更改，并鼓励用户不要使用它来检索元素的选中状态。 相反，您应该使用 ：

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

#2楼

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

基本上，当单击元素＃li_13时，它将使用.attr('checked')函数检查是否已＃同意元素（即复选框）。 如果是，则淡入#saveForm元素；如果不是，则淡出saveForm元素。

#3楼

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

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

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

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

#4楼

我正在使用这个：

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

#5楼

采用：

UDBPrasad

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

如果您希望仅在选中此框时才需要执行所需的操作，而不是在删除该复选框时才有帮助。

#6楼

1）如果您的HTML标记是：

使用的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标记是：

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

#7楼

此示例用于按钮。

请尝试以下操作：

     
 Checkbox  1 
 Checkbox  2 
 Checkbox  3 
$('#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);    }});});

#8楼

jQuery 1.6以上

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

jQuery 1.5及以下

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

任何版本的jQuery

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

一切归功于 。

#9楼

有很多检查复选框是否选中的方法：

使用jQuery进行检查的方法

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

检查示例或文档：

#10楼

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

#11楼

切换：0/1否则

#12楼

我认为这将是简单的

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

#13楼

虽然你已经提出了一个JavaScript解决方案为您的问题（显示textbox时， checkbox被checked ），这个问题可能只是CSS来解决。 通过这种方法，您的表单适用于禁用JavaScript的用户。

假设您具有以下HTML：

Show Textbox

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

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

对于其他情况，您可能会想到合适的CSS选择器。

。

#14楼

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

$(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'); }; }); });

  
     
      Age is something
     

#15楼

我正在使用此，这绝对正常：

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

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

#16楼

您可以使用：

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

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

他们两个都应该工作。

#17楼

用这个：

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

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

#18楼

采用：

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

  Planned

#19楼

此代码将帮助您

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

#20楼

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

在jQuery代码中，我使用了以下选择器来检查该复选框是否已选中，并且看起来像是一种魅力。

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

我确定您也可以使用ID代替CssClass，

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

我希望这可以帮助你。

#21楼

这对我有用：

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

#22楼

使用jQuery的函数：

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

#23楼

使用jQuery> 1.6

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

#24楼

将Click事件处理程序用于checkbox属性是不可靠的，因为在执行事件处理程序本身的过程中， checked属性可能会更改！

理想情况下，你会希望把你的代码放到一个change的事件处理程序，例如它被激发每个复选框的值发生改变时（独立于它是如何做的话）。

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

#25楼

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

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

给定您现有的代码，您可以执行以下操作：

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

但是，使用可以有一种更漂亮的方法：

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

  
     
      Age is something
     

#26楼

我相信您可以这样做：

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

#27楼

这为我工作：

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

其中isAgeSelected是控件的ID。

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

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

#28楼

我的方法是：

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

#29楼

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

如果选中了输入，则返回true否则，返回false 。

#30楼

我决定发布一个答案，说明如何在没有jQuery的情况下执行相同的操作。 只是因为我是反叛者。

var ageCheckbox = document.getElementById('isAgeSelected');var ageInput = document.getElementById('txtAge');// Just because of IE <333ageCheckbox.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';

较慢但跨浏览器兼容。

转载地址：http://tudnb.baihongyu.com/