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

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

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

鉴于你现有的代码，你可以这样做：

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

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

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

我相信你可以这样做：

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

这对我有效：

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

其中isAgeSelected是控件的ID。

此外，@karim79的回答工作正常。我不确定我在测试时错过了什么。

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

我正在使用这个，这个工作非常好：

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

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

我遇到了同样的问题，并且没有一个发布的解决方案似乎有效，然后我发现这是因为ASP.NET将CheckBox控件呈现为SPAN，其中包含INPUT，因此CheckBox ID实际上是SPAN的ID，而不是INPUT，因此您应该使用：

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

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

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

我希望这对你有帮助。

这对我有用：

/* isAgeSelected being id for checkbox */
$("#isAgeSelected").click(function(){$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").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);})});

（在这个问题的其他答案的帮助下）

使用jQuery的#0函数：

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

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

对复选框属性使用Click事件处理程序是不可靠的，因为checked属性可以在事件处理程序本身的执行过程中更改！

理想情况下，您希望将代码放入change事件处理程序中，例如每次更改复选框的值时都会触发它（独立于如何）。

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

我这样做的方式是：

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

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

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

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

如果检查了输入，则返回true，如果没有检查，则返回false。

我决定发布一个关于如何在没有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事件分配一个函数，该函数检查复选框是否被选中并适当地设置age text字段的hidden属性。在该示例中使用三元运算符。

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

增编

如果跨浏览器兼容性是一个问题，那么我建议将CSSdisplay属性设置为没有和内联。

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

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

从jQuery 1.6开始，#0的行为发生了变化，鼓励用户不要使用它来检索元素的检查状态。相反，您应该使用#1：

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

上面的答案对我没有用。但这确实：

<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元素中fadeIn，如果不是fadeOut，则保存表单元素。

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

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

用途：

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

当您选择断章取义时，请记住您需要[0]才能访问复选框。

这是我的解决方法：

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

包括来自本地文件系统的jQuery。我使用了Google的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>

输出屏幕：

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

或

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

这是我认为有效执行此类操作所需的最少代码。我发现这个方法很有用；它返回一个复选框数组，这些复选框被选中，然后您可以使用它们的值（此解决方案使用jQuery）：

// This is how you get themvar 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 + ", ";};

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

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

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

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

我正在使用这个：

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

用途：

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

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

input type="checkbox"的checked属性映射到defaultChecked属性，没有映射到checked属性。

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

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

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

elem.checked

或

$(elem).prop('checked')

1）如果你的超文本标记语言是：

<input type="checkbox"  />

attr使用：

$(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）如果你的超文本标记语言是：

 <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]:checked')

这个例子是按钮。

尝试以下操作：

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

设置：

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

Getter：

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

自动化

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

超文本标记语言

<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');elsealert('check-box is not checked');})});

Ajax

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

jQuery 1.6+

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

jQuery 1.5及以下

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

任何版本的jQuery

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

所有的信用都归于西安。

我实际上更喜欢change事件。

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

小提琴演示

有很多方法可以检查复选框是否被选中：

使用jQuery检查的方法

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/

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

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

它也适用于checkboxes和radioboxes。

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

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

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

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

// Collectionvar chckremember = $("#chckremember");

// Result boolenvar ischecked=chckremember[0].checked;

这个函数是可选的和稳定的：

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

示例：

if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla../*.....*/}else{/*.....*/}

我想会是最简单的

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

$('#chk').change(function() {(this.checked)? alert('true') : alert('false');});


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

对于旧版本的jQuery，我不得不使用以下，

$('#change_plan').live('click', function() {var checked = $('#change_plan').attr('checked');if(checked) {//Code}else {//Code}});

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

假设您有以下超文本标记语言：

<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选择器。

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

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

$(document).ready(function (){
$('#isAgeSelected').click(function() {// $("#txtAge").toggle(this.checked);
// Using a pure CSS selectorif ($(this.checked)) {alert('on check 1');};
// Using jQuery's is() methodif ($(this).is(':checked')) {alert('on checked 2');};
//  // Using jQuery's filter() methodif ($(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>

试试这个，

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

您可以使用：

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

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

他们两个都应该工作。

if($('#isAgeSelected').prop('checked')) {// do your action}

使用这个：

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

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

用途：

<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

这个解决方案呢？

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

此代码将帮助您

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

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

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

只需像下面这样使用它

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

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

let checkbox =document.getElementById('myCheckboxId');if(checkbox.checked) {alert("element is checked");} else {alert("element is  ot checked");}

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

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/

使用纯javascript：

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

您可以尝试此代码：

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

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

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

在纯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>

您可以尝试复选框的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>

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

$('#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属性也可能返回其他类型变量。

最好使用.prop("checked")。它只返回true和false。

你好，你可以使用普通Javascript，如下所示：

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

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

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