关于HTML：如何检查jquery中是否选中复选框？


How to check whether a checkbox is checked in jQuery?

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

例如，如果选中"年龄"复选框，则需要显示文本框以输入年龄，否则隐藏文本框。

但以下代码默认返回false：

1
2
3
4
5
6
7
8
if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

如何成功查询checked属性？

相关讨论

How do I successfully query the checked property?

复选框dom元素的checked属性将提供元素的checked状态。

考虑到您现有的代码，您可以这样做：

1
2
3
4
5
if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

但是，有一种更漂亮的方法可以做到这一点，使用toggle：

1
2
3
$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});
1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<input type="checkbox" id="isAgeSelected"/>
Age is something

相关讨论

使用jquery的is()函数：

1
2
3
4
if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked
相关讨论

使用jquery>1.6

1
2
3
4
5
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

使用新的属性方法：

1
2
3
4
5
if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}
相关讨论

jQuery 1.6 +

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

jquery 1.5及以下

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

jquery的任何版本

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

所有的贷款都归西安。

相关讨论

我正在使用这个，而且它工作得非常好：

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

注意：如果选中该复选框，它将返回"真"，否则将返回"未定义"，因此最好检查"真"值。

相关讨论

用途：

1
2
3
4
5
6
7
8
9
<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");
    }
});

1
2
3
4
5
6
7
    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

自jquery1.6以来，jQuery.attr()的行为已经发生了变化，鼓励用户不要使用它来检索元素的检查状态。相反，您应该使用jQuery.prop()：

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

另外两种可能性是：

1
2
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
相关讨论

这对我很有用：

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

其中，isAgeSelected是控件的ID。

另外，@karim79的回答也很好。我不知道我在测试时错过了什么。

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

相关讨论

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

如果选中，$('#isAgeSelected').prop('checked')将返回true，如果不选中，则返回false。我证实了这一点，我之前也遇到过这个问题。$('#isAgeSelected').attr('checked')和$('#isAgeSelected').is('checked')正在返回undefined，这对于这种情况来说是不值得回答的。按照下面给出的步骤操作。

1
2
3
4
5
if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

希望能有所帮助：)-谢谢。

相关讨论

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

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

1
2
3
4
5
6
7
$('#isAgeSelected').bind('change', function () {

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

我决定在没有jquery的情况下发布一个关于如何做完全相同的事情的答案。只是因为我是个叛逆者。

1
2
3
4
5
6
7
8
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。

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

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

相关讨论

我相信你能做到：

1
2
3
4
5
6
if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}
相关讨论

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

使用jquery检查的方法

1
2
3
4
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

检查示例或文档：

  • http://api.jquery.com/attr/

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

用途：

1
2
<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
1
2
3
4
5
6
7
8
9
$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

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

我也遇到了同样的问题。我有一个ASP.NET复选框

1
 

在jquery代码中，我使用下面的选择器来检查复选框是否被选中，它的工作方式似乎很迷人。

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

我相信你也可以用身份证代替CSSClass，

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

希望这对你有帮助。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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');
        };
    });
});
1
2
3
<script src="http://code.jquery.com/jquery-1.9.1.js">
<input type="checkbox" id="isAgeSelected"/>
Age is something

这对我很有用：

1
2
3
4
5
/* isAgeSelected being id for checkbox */

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

使用此：

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

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

您可以使用此代码：

1
2
3
4
5
6
7
8
$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
1
$(selector).attr('checked') !== undefined

如果输入被检查，则返回true，否则返回false。

相关讨论

我的方法是：

1
2
3
4
5
if ( $("#checkbox:checked").length ) {      
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

你可以使用：

1
2
3
4
  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();
1
2
3
4
if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

他们两个都应该工作。

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

1)如果HTML标记是：

1
<input type="checkbox"  />

使用：

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

如果使用道具：

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

2)如果HTML标记是：

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

使用：

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

支柱使用：

1
$(element).prop("checked") // Will return true whether checked="checked"
相关讨论

最重要的答案不是为我做的。尽管如此：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    $(document).ready(function(){

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

基本上，当单击元素li_13时，它使用.attr('checked')功能检查元素Agree(即复选框)是否被选中。如果是，则在saveform元素中淡出，如果不是，则淡出saveform元素。

这个例子是针对button的。

尝试以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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);
    }
});
});

虽然您已经为您的问题提出了一个javascript解决方案(当checkbox是checked时显示textbox，但这个问题可以通过css解决。使用这种方法，您的表单适用于禁用了javascript的用户。

假设您有以下HTML：

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

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

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

对于其他场景，您可以考虑使用适当的CSS选择器。

下面是演示这种方法的小提琴。

切换：0/1或其他

1
2
3
4
5
6
7
8
9
10
11
<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');
    };
});

我用这个：

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

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

我想会是简单的

1
2
3
4
5
6
7
8
$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});

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

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

1
$('input[type=checkbox]:checked')
1
2
3
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

或

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

包括来自本地文件系统的jquery。我使用了谷歌的cdn，还有很多cdn可供选择。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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');
            }
        });
    });

要测试的简单表单

1
2
3
4
5
6
7
8
9
<form method="post" action="">
   
        <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
   
</form>

输出屏幕：

Enter image description here

我在Firefox 9.0.1中验证了以下方法可以捕获更改后复选框的状态：

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

input type="checkbox"的checked属性映射为defaultChecked属性，而不是checked属性。

因此，当在未选中复选框的情况下在页面中执行某些操作时，请改用prop()方法。它获取属性值并随着复选框状态的更改而更改。

在这些情况下，使用attr(或getAttribute(纯javascript)不是正确的做法。

如果elem是相关复选框，则执行如下操作以获取值：

1
elem.checked

或

1
$(elem).prop('checked')
自动化的

1
2
3
4
5
6
7
$(document).ready(function()
{
    $('#isAgeSelected').change(function()
    {
        alert( 'value =' + $('#chkSelect').attr('checked') );
    });
});

HTML

1
2
3
4
5
 <input type="isAgeSelected" id="chkSelect" /> Age Check

<br/><br/>

<input type="button" id="btnCheck" value="check" />

JQuery

1
2
3
4
5
6
7
8
9
10
11
12
$(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');
    })
});

阿贾克斯

1
2
3
4
5
6
7
8
9
10
11
12
function check()
{
    if (isAgeSelected())
        alert('check-box is checked');
    else
        alert('check-box is not checked');
}

function isAgeSelected()
{
    return ($get("isAgeSelected").checked == true);
}

下面是一个例子，其中包括在页面加载时初始化显示/隐藏以匹配复选框的状态；考虑到在刷新页面时，firefox会记住复选框的状态，但不会记住显示/隐藏元素的状态。

1
2
3
4
5
6
$(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);})
});

(在其他答案的帮助下)

这是我认为有效地执行这样的操作所需的最少的代码量。我发现这个方法很有用；它返回一个复选框数组，选中后您可以使用它们的值(这个解决方案使用jquery)：

1
2
3
4
5
6
7
8
9
10
11
12
// 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将复选框控件呈现为一个包含输入的范围，因此复选框ID实际上是一个范围的ID，而不是一个输入，因此您应该使用：

1
$('#isAgeSelected input')

而不是

1
$('#isAgeSelected')

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

像下面这样简单地使用它

1
2
3
4
5
6
7
 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });

这是我的解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#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");
    }
});

英国塞特犬：

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

Getter：

1
2
3
4
5
if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}

用途：

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

当您在上下文之外选择时，请记住您需要[0]来访问复选框。

实际上，我更喜欢change事件。

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

演示小提琴

使用纯javascript：

1
2
3
4
5
6
7
let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
相关讨论

试试这个，

1
2
3
4
5
6
7
$('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    }
});

选择器返回多个对象，它必须获取数组中的第一个项：

1
2
3
4
5
6
// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;

我使用的是jquery1.11.1，在设置和读取复选框值时也遇到了问题。

我最后通过这两个函数来解决它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

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

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

这个解决方案怎么样？

1
2
3
4
5
$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();

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

EX-X

1)如果选中"年龄"复选框，则需要显示一个文本框以输入年龄，否则隐藏文本框。

2)如果选中"年龄"复选框，则需要显示一个文本框以输入年龄，否则使用"单击事件"复选框隐藏文本框。

因此，默认情况下，代码不会返回false：

请尝试以下操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </head>
        <body>
            Jquery Demo
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
           
              <label>Enter your age</label>
              <input type="number" name="age">
           
            <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();
                }
            });
           
        </body>
    </html>

这里有一个修改过的版本：https://jsfiddle.net/sedhal/0hygltrz/7/

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

1
2
3
4
5
6
let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
    alert("element is checked");
} else {
    alert("element is  ot checked");
}

对于旧版本的jquery，我必须使用以下命令，

1
2
3
4
5
6
7
8
9
$('#change_plan').live('click', function() {
     var checked = $('#change_plan').attr('checked');
     if(checked) {
          //Code      
     }
     else {
          //Code      
     }
});
1
2
3
4
5
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}

您可以尝试以下代码：

1
2
3
4
5
6
7
8
$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});
1
2
3
4
5
6
7
$('#chk').change(function() {
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');

如果需要使用css类作为jquery选择器，可以执行以下操作：

1
2
3
4
5
6
7
8
9
10
$(document).ready(function () {
        $('.myOptionCheckbox').change(function () {            
            if ($(this).prop('checked') == true) {
                console.log("checked");          
            }
            else {
                console.log("unchecked");                
            }
        });
    });

它对checkboxes和radioboxes也适用。

该功能可替代且稳定：

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

例子：

1
2
3
4
5
if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
    /*.....*/
}else{
    /*.....*/
}
1
2
3
if($('#isAgeSelected').prop('checked')) {
    // do your action
}

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

相关讨论