如何检查checkbox是否在jQuery中检查？

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

例如，如果年龄checkbox被选中，那么我需要显示一个文本框input年龄，否则隐藏文本框。

但是下面的代码默认返回false ：

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

如何成功查询checked属性？

Answer 1

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

checkboxDOM元素的checked属性会给你元素的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> 

Answer 2

使用jQuery的is（）函数：

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

Answer 3

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

Answer 4

jQuery 1.6+

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

jQuery 1.5及以下

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

任何版本的jQuery

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

所有的功劳都归西安 。

Answer 5

我正在使用这个，这是工作绝对好：

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

注意：如果checkbox被选中，它将返回true，否则不确定，所以最好检查“TRUE”值。

Answer 6

由于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") 

Answer 7

这对我工作：

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

其中isAgeSelected是控件的ID。

此外，@ karim79的答案工作正常。 我不确定我在testing的时候错过了什么。

请注意，这是答案使用微软的Ajax，而不是jQuery

Answer 8

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

$('#isAgeSelected').prop('checked')如果选中则返回true否则返回false 。 我证实了这一点，我早些时候遇到过这个问题。 $('#isAgeSelected').attr('checked')和$('#isAgeSelected').is('checked')正在返回undefined ，这不是一个值得回答的情况。 所以如下所示。

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

希望它有助于：） – 谢谢。

Answer 9

使用：

 <input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned $("#planned_checked").change(function() { if($(this).prop('checked') == true) { alert("Checked Box Selected"); } else { alert("Checked Box deselect"); } }); 

  $("#planned_checked").change(function() { if($(this).prop('checked') == true) { 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 

Answer 10

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

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

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

Answer 11

我决定发布一个关于如何做到没有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获得两个元素。 然后，您分配checkbox的onchange事件一个函数，检查checkbox是否被检查，并适当地设置年龄文本字段的hidden属性。 在那个例子中使用三元运算符。

这是你的一个小提琴来testing它。

附录

如果跨浏览器兼容性是一个问题，那么我build议将CSS display属性设置为none和inline 。

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

较慢，但跨浏览器兼容。

Answer 12

我相信你可以这样做：

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

Answer 13

我跑到完全相同的问题。 我有一个ASP.NETcheckbox

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

在jQuery代码中，我使用了下面的select器来检查checkbox是否被选中，而且它看起来像一个魅力。

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

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

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

我希望这可以帮助你。

Answer 14

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

如果input被选中，则返回true否则返回false 。

Answer 15

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

Answer 16

我这样做的方式是：

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

Answer 17

这适用于我：

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

Answer 18

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

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

Answer 19

你可以使用这个代码：

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

Answer 20

您可以使用：

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

---

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

他们都应该工作。

Answer 21

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" 

Answer 22

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

Answer 23

最重要的答案并不适合我。 尽pipe如此：

 <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')函数.attr('checked')元素＃agree（这是checkbox）。 如果是，则在#saveForm元素中淡出，如果不是则淡出saveForm元素。

Answer 24

用这个：

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

如果checkbox被选中，则长度大于零。

Answer 25

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

 $(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="jquery-1.9.1.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none">Age is something</div> 

Answer 26

这个例子是用于button的。

尝试以下操作：

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

Answer 27

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

假设你有以下的HTML：

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

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

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

对于其他场景，你可能会想到适当的CSSselect器。

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

Answer 28

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

要么

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

Answer 29

我正在使用这个：

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

Answer 30

我认为这将是一个简单的

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