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

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

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

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

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

如何成功查询checked属性?

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

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> 

使用jQuery的is()函数:

 if($("#isAgeSelected").is(':checked')) $("#txtAge").show(); // checked else $("#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 

使用新的属性方法:

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

jQuery 1.6+

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

jQuery 1.5及以下

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

任何版本的jQuery

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

所有的功劳都归西安 。

我正在使用这个,这是工作绝对好:

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

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

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

这对我工作:

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

其中isAgeSelected是控件的ID。

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

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

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

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

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

希望它有助于:) – 谢谢。

使用:

 <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 

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

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

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

我决定发布一个关于如何做到没有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属性设置为noneinline

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

较慢,但跨浏览器兼容。

我相信你可以这样做:

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

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

我希望这可以帮助你。

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

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

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

我这样做的方式是:

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

这适用于我:

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

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

使用jQuery进行检查的方法

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

检查示例或文档:

你可以使用这个代码:

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

您可以使用:

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

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

他们都应该工作。

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" 

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

最重要的答案并不适合我。 尽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元素。

用这个:

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

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

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

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

这个例子是用于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); } }); }); 

虽然你已经提出了针对你的问题的JavaScript解决scheme(当checkboxchecked时显示一个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器。

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

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

要么

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

我正在使用这个:

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

我认为这将是一个简单的

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